HTML5表单的学习

Web学习Day5——html（3）

表单学习
（1）表单
Form表单主要用于用户与Web应用程序进行数据的交互，它允许用户将数据发给web应用程序，网页也可以拦截数据的发送以便自己使用。
form通常由一到多个表单元素组成，这些表单元素是单行/多行文本框，下拉菜单，按钮，复选框，单选按钮，时候表单元素时一般要配合label标签，用于描述其目的。

其可用属性如下：
1.action用于处理表单信息的应用程序的地址。
2.method浏览器用来提交表单的HTTP方法。
3.get对应于Http协议的GET方法，表单数据被附加在uri上，使用"?"分隔。
4.post对应于Http协议的POST方法，表单数据包含在HTTP协议的请求报文的体部。
5.name设定表单的名称
6.target表示浏览器接收到form的提交信息后在哪里显示回应。
_self，_blank，_parent，_top

（2）Input表单组件
Input组件用于接受来自用户的数据，其可用属性如下
1.type用于设定组件类型
2.text单行文本框lpassword密码框，输入的内容将会被遮挡。
3.checkbox复选框，必须使用value属性来描述该组件所提交的值，使用checked属性默认选中。
4.radio单选按钮，必须使用value属性来描述该组件所提交的值，使用checked属性默认选中。一个单选按钮组中所有组件都应该具有相同的name值，这样，每次只能选中按钮组中的某一个组件
5.submit提交按钮
6.reset重置按钮
7.file文件按钮，该组件用于选中文件系统中的某个文件
8.hidden隐藏域，该组件不显示在页面中，但是其值会被提交。
9.image图像按钮，必须使用src来加载图片，使用alt来声明替换文本。
10.button普通按钮

（3）fieldset组件用于在一个web表单中对多个控件和标签进行分组
disabled禁用filedset元素，该属性会影响的fieldset的子元素
namefieldset元素的名称
fieldset的标题由标签提供

<form action="test.php" method="POST">
        <fieldset>
            <legend>title</legend>
            <input type="radio" id="redio">
            <label for="radio">Click me</label>
        </fieldset>
    </form>

（4）Input组件用于接受来自用户的数据，其可用属性如下
name用于设定组件类型
value用于设定初始化，可选。
checked单选框，复选框默认选中属性
disabled表示禁用组件，禁用组件的值也不能被提交
size当前控件的初始宽度，这个宽度以像素为单位。除非控件类型是text,password，这时宽度是整数值，表示字符的数目，默认为20nmaxlength指定可以输入的字符的最大值。适用于控件类型为text,password。

（5）button表单组件其可用属性如下按钮控件
type指定控件类型button，submit，reset
name按钮名称。
value按钮所关联的值，会与name的值一同被提交

（6）select表单组件select用于表示下拉列表或列表，其可用属性如下
multiple指定控件类型布尔类型的值，表示是否允许多选，如果select元素不包含属性size和属性multiple时，表单类型显示为菜单（组合框），如果使用了属性size和属性multiple中的任意一个，则表单类型显示为列表框。
size显示的行数当要表示一个可以滚动的列表时候，size表示同时展示的行数。默认值为0。表示非列表显示
disabled表示禁用组件，禁用组件的值也不能被提交
name用于指定该组件的名字，会与其option子元素的value值组成键值对随其他表单数据一齐被提交

（7）option表单组件 option用于表示选项，常包含在 , 中
disabled 表示禁用组件，禁用组件的值也不能被提交
value 定义控件的初始值。提交表单时，初始值会被提交给服务器。
selected 表示该选项默认被选中

 <select name="select">
        <option value="value1">value1</option>
        <option value="value2" selected>value2</option>  
        <option value="value3">value3</option>
    </select>

（8）optgroup表单组件 optgroup用于表示包含option的选项组，常包含在 中
disabled 表示禁用组件，禁用组件的值也不能被提交
label 表示选项组的名称
selected 表示该选项默认被选中

<select>
        <optgroup label="Group 1">
            <option>Option 1.1</option>
        </optgroup>
        <optgroup label="Group 2">
            <option>Option 2.1 </option>
            <option>Option 2.2 </option>
        </optgroup>
        <optgroup label="Group 3">
            <option>Option 3.1 </option>
            <option>Option 3.2 </option>
            <option>Option 3.3 </option>
        </optgroup>

    </select>

（9）textarea
textarea用于表示多行文本框，没有value属性，其值被包含在标签内
rows 定义文本框的行数 ncols 定义文本框的列数
warp 表示是否自动换行 •off 不自动换行 • hard自动硬回车换行，换行元素一同被传送到服务器中 • soft自动软回车换行，换行元素不会传到服务器中
disabled 表示禁用组件，禁用组件的值也不能被提交
readonly 表示该组件只读，其值依然会被提交
name 用于指定该组件的名字，会随着其值一同被提交到后台