HTML表单

一、组成

• 表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
• 提示信息：一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。
• 表单域：他相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器

• form属性：

　　　　①Name ：定义表单的名称

　　　　②Method: 定义表单结果从浏览器传送到服务器的方式，默认参数为：get ；

　　　　③Method=”get | post”   ，Get通过地址栏提供（传输）信息，安全性差。Post 通过1.php来处理信息，安全性高。

　　　　④Action ：用来指定表单处理程序的位置(服务器端脚本处理程序） 

<form name="form_name" action="url" method="get|post">…</form>

二、常用表单元素（表单域）

• 文本输入框

   用户名：<input type="text" maxlength="6" size="" disabled="disabled" name="username" value="未激活"><br />
   用户名：<input type="text" maxlength="6" size="" readonly="readonly" name="username" value="只读">

①maxlength="6"    限制输入字符长度

②readonly=”readonly”  将输入框设置为只读状态（不能编辑）

③disabled="disabled"  输入框未激活状态

④name="username"   输入框的名称

⑤value="大前端"     将输入框的内容传给处理文件

• 密码输入框

   密&nbsp;&nbsp;&nbsp;码：<input type="password" name="pwd">

注意：文本输入框的所有属性对密码输入框都有效。

• 单选框

   <input type="radio" name="gerden" checked="checked">男
   <input type="radio" name="gerden">女

①只有将name的值设置相同的时候，才能实现单选效果。

②checked=”checked” 设置默认选择项。

• 下拉列表

   <select>
       <option>深圳</option>
       <option selected="selected">广州</option>
       <option>惠州</option>
       <option>佛山</option>
    </select>
    <select multiple="mutiple">
       <option>深圳</option>
       <option selected="selected">广州</option>
       <option>惠州</option>
       <option>佛山</option>
    </select>
    <select>
       <optgroup label="A">
       <option>深圳</option>
       <option >广州</option>
       </optgroup>
       <optgroup label="B">
       <option>惠州</option>
       <option>佛山</option>
        </optgroup>
    </select>

①Multiple=”multiple”  将下拉列表设置为多选项

②Selected=”selected”  设置默认选中项目

③<optgroup></optgroup>   对下拉列表进行分组。

④Label=””  分组名称。

• 多选框

   <input type="checkbox" checked>刘备
   <input type="checkbox">关羽
   <input type="checkbox" checked>张飞

Checked=”checked” 设置默认选中项

• 多行文本框

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

①Cols  控制输入字符的长度。

②Rows  控制输入的行数

③ 如果需要输入大量的信息，就需要用到<textarea></textarea>标记。

• 文件上传控件

   <input type="file">

• 普通按钮

注意：不能提交信息，配合js使用

   <input type="submit" value="普通按钮">

• 文件提交按钮

<input type="submit">

★：可以实现信息提交功能

• 图片按钮

   <input type="image" src="../2.26/picture.jpg" width="50">

★图片按钮可实现信息提交功能

• 重置按钮

   <input type="reset">

★将信息重置到默认状态

• 表单信息分组

<fieldset>
<legend>分组信息</legend>
</fieldset>

①<fieldset></fieldset>    对表单信息分组

②<legend></legend>      表单信息分组名称