表单标签下
目录
Datalist标签
<datalist> 标签需要与 <input>标签配合使用，用来表示可选的列表，IE 9 和更早版本的 IE 浏览器 以及 Safari 不支持 <datalist>标签。
- 写一个输入框
- 写一个
datalist，通过<option>标签来添加可选项 - 绑定
datalist到指定输入框，即先设置<dalalist>标签的id，再设置<input>标签的list属性为<datalist>标签的id值
<form action="">
<!--datalist标签，给输入框绑定待选项-->
<input type="text" list="education">
<datalist id="education">
<option value="Bachelor"></option>
<option value="Master"></option>
<option value="Doctor"></option>
</datalist>
</form>Select标签
- 用于定义下拉列表，下面代码将会生成一个具有四个直辖市选项的下拉列表,
<select>标签形似<datalist>标签，但是是完全不一样的两个标签，<datalist>标签是用来绑定给某个输入框，而<select>标签本身就是一个选择输入框 - 通过
selected="selected"可以设置列表的默认值 <optgroup>标签，当选项比较多的时候为了提高阅读性，可以通过<optgroup>标签来添加分组，<optgroup>标签的label属性为分组的标题
<form action="">
<select name="cityname" id="cityname">
<optgroup label="Municipality">
<option value="1">北京</option>
<option value="2" selected="selected">上海</option>
<option value="3">重庆</option>
<option value="4">天津</option>
</optgroup>
<optgroup label="Non-Municipality">
<option value="5">南京</option>
<option value="6">杭州</option>
<option value="7">深圳</option>
<option value="8">广州</option>
</optgroup>
</select>
</form>Textarea标签
- 定义一个多行的文本输入框；
- 默认情况下输入框可以无限换行；
- 默认情况下输入框有自己的宽高；
- 默认情况下输入框是可以自由缩放的，可以通过css禁止自由缩放；
- 可以通过cols和rows然手动指定输入框的宽高，但是仍然可以无限换行；
<textarea name="textarea" id="myTextarea" cols="30" rows="10"></textarea>综合练习
利用表单标签制作一个简单的注册界面
<form action="http://www.baidu.com">
<fieldset>
<legend>个人信息:</legend>
<p><label for="username">账号:</label><input type="text" id="username"></p>
<p><label for="password">密码:</label><input type="password" id="password"></p>
<p>性别:<input type="radio" name="gender" checked="checked" value="male">男<input type="radio" name="gender" value="female">女<input type="radio" name="gender" value="secret">保密</p>
<p>爱好：<input type="checkbox" name="hobby" value="basketball">篮球<input type="checkbox" name="hobby" value="football">足球<input type="checkbox" name="hobby" value="bigsword" >大宝剑<br></p>
<p>个人简介：<textarea cols="30" rows="5" name="personalDesc"></textarea></p>
<p>生日：<input type="date" name="birthday"></p>
<p>邮箱：<input type="email" name="email"></p>
<p>手机：<input type="number" name="phoneNo."></p>
<p> <input type="reset" > <input type="submit" value="注册"></p>
</fieldset>
</form>注意点
- 只有设置了name属性的表单标签，在表单提交的时候才会把数据提交到服务器
- 同一组的单选框和多选框的name属性必须一致
- 非button的表单标签通过设置value来定义提交表单的数据，比如一个单选框组里面有男、女、保密三个选项，设置
name="gender"的情况下，如果不设置value属性，提交之后的数据格式是gender=on，这样没有办法确定选择的到底是哪个，如果设置了value，男-"male"，女-"female"，提交之后的数据格式就会是gender=male - 可以通过
<fieldset>和<legend>配合使用来给表单添加外边框和标题，其中，<fieldset>标签紧跟在<form>标签之后，包裹整个表单，<legend>标签紧跟在<fieldset>标签之后。