HTML 表单的用法

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>