第十六章 表单

1、创建表单form

<form method="formmethod" action="script.url">表单内容 </form>

• formmethod:get（希望表单提交后从服务器得到信息）、post（提交表单后，表单中的数据不会显示在浏览器的地址栏里、可以向服务器发送更多的数据）
• script.url：提交表单时要运行的脚本在服务器上的位置

2、对表单元素进行组织fieldset

<form method="formmethod" action="script.url"> 
    <fieldset>
        <legend>标题</legend>
        ...........
    </fieldest>
</form>

• lehend可选，使用legend必须要有fieldest

3、创建文本框input type='text'

<input type="text" name=" datamane" id="idlabel' value=“default” placeholder="hinttext" require="reguired" autofocus/autofocus="autofocus" size="n" maxlength="n" />    

• dataname：用于让服务器和脚本识别输入数据的文本
• idlabel：同abele的for属性值相同，具有显示文本框的label属性相连
• default：这个字段中最初显示的数据，如果访问者没有输入别的内容，这一数据将被送到服务器
• hinttet：这个字段中最初显示的数据，用于指导用户的输入，当input元素获得焦点时，这些文本将会消失，让用户输入内容
• required: 仅在这个字段有值的情况下才能提交表单
• autofocus：如果这是第一个拥有此属性的表单控件，input元素在页面加载时会默认获得焦点
• size：文本框的宽度，以字符为单位
• maxlength：文本框允许输入的最大字符数
• 默认情况下，大多数浏览器会保存用户输入的文本，若要关闭，在input中添加autocomplete="off";若在form元素中，则每个字段都会这样
• 获取焦点、拥有焦点：光标位于文本框内，访问者可以随时输入的状态

4、为表单组件添加说明标签label

<label for="idlabel"> 标签内容</label>

• 如果创建的是表单元素，确保id属性和for属性的值一致
• for、id、name属性值可一样可不一样（单选按钮、复选框例外），for、id属性值必须一样

5、创建密码框input type="password"

• 即使密码框中没有任何输入任何内容、name属性仍将被发送到服务器（使用未定义的value）

6、创建电子邮件框、搜索框、电话框、url框input type="email、input type="search"、input type="tel、input type="url"

• pattern="\d{3}-\d{3}-\d{4}"属性：用于定制验证规则
• multiple属性：可以输入多个电子邮件地址，以逗号分隔
• 空的电子邮件框、电话框、URL框也会通过验证，除非有required属性，如果添加required，但没有pattern属性提供内容，浏览器仍会要求用户填写内容，但任何文本都会通过验证

6、创建单选按钮input type="radio"

<input type="radio" name="radioset" value="data" checked/checked="checked" />
<label for="idlabel">按钮标签</label>

• name：用于识别发送至服务器的数据，同时用于将多个单选按钮联系在一起，确保同一组中最多只有一个被选中
• value：该单选按钮被选中时要发送给服务器的文本
• checked：让单选按钮在页面打开时默认出于激活状态，在一组单选按钮中，只能对一个按钮添加这一属性
• id值与for值相同
• 按钮标签的值通常与value值相同，但这不是必须的

7、创建复选框input type="checkbox"

• name：用于将多个复选框联系在一起（对于所有复选框使用同一个name值）

8、创建文本区域textarea

<textarea id="idlabel" name="dataname" maxlength="n" cols="n" rows="n"> 文本区域的默认文本</textarea>

• name：用于让服务器（和脚本）识别输入数据的文本
• maxlength：可以输入的最大字符数
• cols：文本区域的宽度（以字符为单位）
• rows：文本区域的高度（以行为单位）
• 可以包含placeholder属性定义用于占位的文本
• 在css中设置 resize：none访问者不可通过拖曳文本区域右下角的斜线改变文本区域大小

9、创建选择框select

（1）、创建选择框

<select id="idlabel" name="dataname" size="n' muliple="multiple/multiple'>
<option value="optiondata" selected/seclected="seclected">输入希望出现在菜单中的选项名称</option>
<option .......
</selecct>

• id与lable中for的值一样
• name：用于在收集的数据发送至服务器时对数据进行识别
• size：选择框的高度，以行为单位
• multiple：允许访问者选择一个以上的菜单选项（选择时按住control或command）
• value：选项选中后要发送给服务器的数据（如果省略value，在“输入希望出现在菜单中的选项名称”就是选项的值）
• selectd：指定该选项被默认选中

（2）、对选择框选项进行分组optgroup

<optgroup label="submenutitle"> /!-- 放在希望放在同一子菜单中的第一组选项中的第一个option元素之前-->
</optgroup>/!-- 在该组的最后一个option之后> 

• label：子菜单的标题

10、让访问者上传文件input type="file"

<form method="post" enctype="multipart/form-data" action="upload.url">
<label.....>
<input type="file" id="idlabel" name=dataname zise="n" multiple/multiple="multiple" />
<form>

• enctype：确保文件采用正确的格式上传

11、创建隐藏字段input type=hidden（用于存储表单中的数据，但不就显示给访问者）

<input type=`hidden` name="dataname" value="data"/>

• name：确定要提交给服务器的信息
• value：要提交的信息本身，通常是表单处理脚本中的一个变量
• 隐藏字段出现在表单标记中的位置并不重要，因为他们在浏览器中不可见
• 创建访问者可见但不可修改的表单元素：disadled（禁用属性）、readonly（只读）属性（可以获得焦点，访问者可以选择和复制里面的文本，但不能修改这些文本）

12、创建提交按钮

（1）、创建提交按钮

<input type="submit" value="submit message" />

• value：将要出现在按钮上的文本

（2）、创建带图像的提交按钮

<input type="image" src="image.url" alt="description" />

（3）、创建结合文本和图像的提交按钮

<button type="submit">输入将要出现在按钮中图像左侧的文本
<img src="image.url" alt="alternate text" />
输入将要出现在按钮中图像右侧的文本
</button>

• 省略value，默认submit、submit query
• 有多个提交按钮，可以为每个提交按钮设置name属性和value属性
• 使用button元素创建不包含图像的提交按钮
• 重置按钮：将表单数据还原为页面加载时的样子 <input type="rest" />、<button type="reset">reset</button>
• type="email"、type=“url”的input添加了自动验证功能，对提交按钮使用formnovalidate属性可以关闭该功能input type="submit" foamnovalidata />

12、禁用表单元素

• 在表单元素的开始标签后输入disabled或disabled="disabled"