HTML基础复习（八）表单

表单-----<form>用于收集不同类型的用户输入

最常用的输入元素

　　1、<input>,根据类型type属性可以设置不同的输入类型：

　　　　type="text"：文本域，文本域的缺省宽度是20个字符

　　　　type="password"：密码字段

　　　　type="button"：按钮

　　　　type="radio"：单选按钮

　　　　type="checkbox"：复选框

　　　　type="submit"：提交按钮

　　　　type=“number”：数字输入框

　　　　type=“range”：数字范围滑动条

 

　　2、<select>,下拉选择框

　　　　<select name="sex">

　　　　　　<option value="boy">boy</option>

　　　　　　<option value="girl">girl</option>

　　　　</select>

• 默认显示第一个option；要预设下拉框，在对应的标签<option>内添加属性selected即可
• 属性multiple和size可设置多选，但还是尽量使用复选框

 

　　3、<textarea>多行文本输入框

　　　　<textarea rows="10" cols="30">

　　　　　　我是一个文本框。

　　　　</textarea>

 

　　4、<label>为input元素标记

• 当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上，优化鼠标点击事件易用性，它的for属性应当与相关元素的ID相同。

 

• 它还可以在表单以外，但它仍然属于某一个表单，通过form属性指定它关联的表单

　　5、<fieldset>将表单内的相关元素分组。

　　　　<fieldset> 标签会在相关表单元素周围绘制边框。

　　　　<legend>标签为fieldset元素定义标题

 

　　6、<datalist>预先定义输入框input的可能选项

 

　　　　<input list="browsers">

　　　　　<datalist id="browsers">

　　　　　　<option value="Internet Explorer">

　　　　　　<option value="Firefox">

　　　　　　<option value="Chrome">

　　　　　　<option value="Opera">

　　　　　　<option value="Safari">

　　　　</datalist>