1、HTML表单的用途
简单说就是html通过表单收集用户信息(即:不同类型数据)并提交后台服务器,以便于用户和WEB服务器的交互。
2、HTML表单元素
HTML表单元素主要包括input、label、select、textarea等元素。
注:form的”action”属性用来指定处理该表单的后台程序URL,“method”属性用于指定传送数据的方式post还是get(默认)
2.1、input元素
<input type="text">:定义用于文本输入的单行输入字段(默认宽度为20个字符)
<input type="password">:定义密码字段
<input type="radio">:定义单选按钮,允许用户在有限数量的选项中选择一个
<input type="checkbox">:定义复选框
<input type="submit">:定义用于向表单处理程序提交表单的按钮。
<input type="button">:定义按钮
<input type="number">:用于应该包含数字值的输入字段
<input type="date">:用于应该包含日期的输入字段
<input type="color">:用于应该包含颜色的输入字段,根据浏览器支持,颜色选择器会出现输入字段中。
<input type="range">:用于应该包含一定范围内的值的输入字段,根据浏览器支持,输入字段能够显示为滑动控件
<input type="month">:允许用户选择月份和年份,根据浏览器的支持,日期选择器会出现在输入字段中
<input type="week">:允许用户选择周和年,根据浏览器支持,日期选择器会出现输入字段中。
<input type="time">:允许用户选择时间(无时区),根据浏览器支持,时间选择器会出现输入字段中。
<input type="datetime">:允许用户选择日期和时间(有时区),根据浏览器支持,日期选择器会出现输入字段中。
<input type="datetime-local">:允许用户选择日期和时间(无时区),根据浏览器支持,日期选择器会出现输入字段中。
<input type="email">:用于应该包含电子邮件地址的输入字段,根据浏览器支持,能够在被提交时自动对电子邮件地址进行验证。
<input type="search">:用于搜索字段(搜索字段的表现类似常规文本字段)。
<input type="tel">:用于应该包含电话号码的输入字段,目前只有Safari 8支持该类型
<input type="url">:用于应该包含URL地址的输入字段,根据浏览器的支持,在提交时能够自动验证url字段。
注:input标签的”placeholder”属性用于展示提示语,”accept”属性用来选择上传文件的属性。
2.2、label元素
label标签用于关联控件常与input标签一起使用 。label的”for”属性一般与input的”id”属性一致(绑定)
2.3、select元素
select标签和option标签用于展示下拉菜单,示例如下:
<select name="city">
<option value="beijing">北京</option>
<option value="shanghai" selected="selected">上海</option>
<option value="hangzhou">杭州</option>
</select>
2.4、textarea元素
<textarea> 元素定义多行输入字段(文本域),示例如下:
<textarea name="article">
多行文本,注意type=text和type=password的区别
</textarea>