HTML5表单的应用以及各种input输入标签

表单的应用form标签

表单是页面的重要的组成部分，它收集用户的输入信息，并且将这些信息发送给服务端进行处理。例如：注册，查询等功能。它用form标签和其他的输入标签组成。
form标签用于定义表单，在页面上没有任何的显示效果，单独的使用也没有任何意义。在标签体中的各个输入信息将被手机 发送给服务器。
表单的定义格式 ：

<form method="提交方式" action='服务端网址' enctype='编码方式'></form>


method属性：用于规定如何发送表单数据，发送到action属性中的服务端地址，有get/post两种方式。
method=“get” 默认值，使用这种方法提交的数据和附加到服务端url之后。
例如action服务端地址是

http://www.example.com/


使用get方法提交数据x y 后 浏览器中加载的服务端地址会是

http://www.example.com/?x=2&y=3


受于url长度限制，最多只能传递1kb。字母数字字符按原样发送，空格转换成+，其他符号转换%xx ,xx为该符号以十六进制表示的ASCLL值。
post方式传递数据的数据量较大，它把数据作为http请求的内容。

各种输入input标签

1.单行文本输入框

<input type="text" value="张三丰" />


2.密码输入框

<input type="password" value="1234" />


3.按键

<input type="button" value="按键"/>


4.单选框(同一组的选项必须制定相同的name值)

<input type="radio" checked="checked" /> 男


5.复选框（同一组的选项必须制定相同的name值 用于多项选择、）

<input type="checkbox" name="input_1" /> 兴趣1
<input type="checkbox" name="input_1" /> 兴趣2


6.提交按钮
当表单的信息输入完成后，需要提交给服务器，表单的提交按钮会完成表单的提交动作、外观上和普通按钮没有什么区别。

<input type="submit" name="" id="" value="submit" />


7.图片提交按钮
图片提交按钮和提交按钮的功能相同，不同的是它以图片作为按钮。

<input type="image" name="" id="" value="" src="img/1.png" />


<form action="">
<input type="image" src="img/1.png" name="" id="" value="" />
<input type="email" name="" id="" value="" />
</form>


12.URL输入文本框
和上面的Email输入框同理 会自动验证URL地址格式

<input type="url"/>


13.电话输入文本输入框

<input type="tel"/>


14.关键词搜索文本框

<input type="search"/>


15.颜色设置文本框

<input type="color"/>


16.数字输入框
只能输入数字 不嗯呢该输入字母 可以设置最大值 最小值

<input type="number" value="当前值" min="最小值" max="最大值"/>


17.滑动条
滑动条是专用于提供一定范围内数值
step用于设置数值间隔
ios中的滑动条样式有所不同

<input type="range" name="" id="" value="2" min="1" max="12"
step="1"/>


18.日期和时间的输入框
如下代码所示 会显示日期选择框 月份选择框 星期选择框

<input type="'date"/>
<input type="month">
<input type="week">


input标签的其他属性

1.palceholder

用于input类型的输入框提供相关提示信息，它在输入信息为空时以灰色的形式显示出来。

<form action="">
<input type="text" name="" id="" value="" placeholder="提示"/>
</form>


2.required
用于在form提交数据前，为input输入框规定必须输入数据，没输入，会有错误信息提示

<form action="" >
<input type="image" src="img/1.png" " name="" id="" value="" />
<input type="text" required="required" name="" id="" value="" placeholder="提示"/>
</form>


3.pattern
用于在form提交数据前，为input输入框规定必须输入数据符合正则表单时，不满足，会有错误信息提示
4.disabled
用于禁用input类型的输入框，被禁止时输入框不可用。可以设置disabled属性，直到满足一些条件。

其他的表单标签

当需要提交大量的文本信息时，input type=“text” 就不太适用
使用textarea标签 可以输入大量文本 拖动右下角可以改变表单大小 文本过多时可以自动生成滚动条

<textarea name="" rows="" cols="">输入</textarea>


selete标签
下拉菜单
option标签是各种选项

<select>
<option value="item1"> 选项1</option>
<option value="">选项2</option>
</select>