表单(2)

43 阅读1分钟

<label></label>标签

<label></label> 标签用于绑定一个表单元素,当点击 <label></label>  标签内的文本时,浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户的体验

语法:
<label for="sex"></label>
<input type="radio" name="sex" id="sex"/>
核心:

<label></label>标签的for属性应当与相关元素的id属性相同

案例:
性别:<label for="nv"></label><input type="radio" name="sex" value="女" id="nv">
     <label for="nan"></label><input type="radio" name="sex" value="男" id="nan"> 

<textarea></textarea>表单元素

<textarea rows="3" cols="20">
文本内容
</textarea>
注意:
  1. 通过 <textarea> 标签可以轻松的创建多行文本输入框
  2. cols:“每行中的字符数”,rows:“显示的行数”

<select></select>下拉菜单

语法:
<select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
</select>
注意:
  1. <select></select> 中至少包含一对 <option>
  2. 在 <option> 中定义 selected="selected" 时,表示当前项为默认选中项。
案例:
<select>
    <option>湖北</option>
    <option selected="selected">北京</option>
    <option>上海</option>
</select> <br />

表单案例

<form action="http://www.baidu.com" method="get" name="greenjieshao">
    用户名:<input type="text" name="username" /><br />
    密码:<input type="password" name="mima" /><br />
    爱好:
        下棋: <input type="checkbox" name="aihao" value="下棋" /><br />
         看书:<input type="checkbox" name="aihao" value="看书" /><br />
    性别:
         女<input type="radio" name="sex" value="女" /><input type="radio" name="sex" value="男" /><br />
    邮箱:<input type="email" /><br />
    url网址:<input type="url" /><br />
    数字输入:<input type="number" /><br />
    数字范围:<input type="range" /><br />
    生日:<input type="data"/><br />
    搜索:<input type="search" /><br />
    颜色:<input type="color" /><br />
    电话:<input type="tel" /><br />
    个人简介:
    <textarea cols="10" rows="5"></textarea><br />
    <input type="button" value="普通按钮" />
    <input type="submit" value="提交按钮" />
    <input type="reset" value="重置按钮" />
    <input type="image" src="2.jpg" width="100px" height="100px" />
    <input type="file" />
</form>