表单标签

表单标签是一个包含表单元素的区域,可以包含一些表单控件还可以包含其他的HTML标签(如表格、段落、标题)。表单之间相互独立,不能嵌套。虽然一个页面可以有多个表单,但用户向服务器发送数据时只能提交一个表单的数据。如果需要同时提交多个表单则需使用JavaScript的异步交互方式实现。

<!--表单的语法-->
<form action="处理数据程序的URL地址" method="get|post" name="表单名称" ...>
</form>

• action：先何处发送表单数据
• accept：服务器能够处理的内容类型列表
• accept-charset：服务器可以处理的表单数据字符集
• enctype：表单数据的内容类型,说明在发送表单数据之前如何进行编码,取值可以是application/x-www-form-urlencoded、multiple/form-data、text/plain
• target:打开处理URL的目标位置（不建议使用）
• method：设置请求方式get、post默认get

表单域

表单域多用于收集网站访问者的信息,一般位于<form></form>标签之间。表单域包括文本框、密码框、隐藏域、多行文本框、单选按钮、复选框、列表选择框和文件选择框等。除多行文本框和列表选择框外,大部分表单域使用<input>标签来创建。

• <input>标签的通用属性

单行文本框

【语法】

<input type="text" name="username" placeholder="请输入账号" .../>

• type=“text” ：用于指明表单域的类型是单行文本框
• placeholder：本文框提示
• disabled=“disabled”：用于指明文本框的禁用状态,并呈现灰色
• readonly=“readonly”：用于指定文本框的只读状态

密码框

【语法】

<input type="password" name="pwd" placeholder="请输入密码" .../>

• type=“password”：用于指明表单域的类型是密码框
• size：用于指定密码框的宽度,单位是字符
• placeholder：密码框提示

单选按钮

【语法】

男<input type="radio" name="sex" value="man" checked />
女<input type="radio" name="sex" value="man" />

• type=“radio”：用于指明表单域的类型是单选按钮
• name：具有相同name属性的单选按钮分为一组,一组只能选择一项
• value：同组单选按钮的value不能相同
• checked=“checked”：默认选中,简写checked

复选框

【语法】

唱歌<input type="checkbox" name="hobby" value="sing" checked/>
跑步<input type="checkbox" name="hobby" value="run" checked/>
篮球<input type="checkbox" name="hobby" value="basketball" />

• type=“checkbox”：用于指明表单域的类型是复选框
• name：具有相同name属性的单选按钮分为一组,组内允许多选
• value：同组单选按钮的value不能相同
• checked=“checked”：默认选中,简写checked

文件选择器

【语法】

<input type="file" name="file" accept="image/*" />

• type=“file”：用于指明表单域的类型是文件选择器
• name：指定文件选择器的名称
• accept：用于指定文件选择窗口的文件类型过滤,如图片的格式包括：image/gif、image/jpeg、image/*等

使用文件选择器时form表单的enctype属性应设为multiple/form-data

隐藏域

【语法】

<input type="hidden" name="hiddenData" value="不显示的数据" />

• type=“hidden”：用于指明表单域的类型是隐藏域

多行文本选择框

【语法】

<textarea name="area" rows="5" cols="5">文本内容</textarea>

• rows：指定多行文本框的行数
• cols：指定多行文本框的宽度,单位是字符
• wrap：指定文本内容大于文本宽度时的显示方式
  wrap属性表

列表选择框

【语法】

<select name="province">
	<option value="ZJ">浙江</option>
	<option value="SH" selected>上海</option>
	<option value="BJ">北京</option>
</select>

• size：指定列表选择框显示的行数
• multiple=“mutiple”：允许按住Ctrl进行多选,不设置该属性时默认只能选择一项
• disabled=“disabled”：放在<select>标签中表示禁用列表,放在<option>标签中表示该项在首次加载被禁用
• selected=“selected”：放在<option>标签中表示默认选中,简写selected

按钮控件

【语法】

<!-- 按钮控件第一种写法 -->
<input type="button" name="btnNormal" value="普通按钮" />
<input type="submit" name="btnSubmit" value="提交按钮" />
<input type="reset" name="btnReset" value="重置按钮" />
<input type="image" name="btnImage" src="1.jpg" width="50"/>
<!-- 按钮控件第二种写法 -->
<button type="button">普通按钮</button>
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
<button type="button">
	<img src="1.jpg" width="50"/>
</button>

表单分组

大型表单在视觉上容易产生混淆,通过表单的分组可以将表单上的控件在形式上进行组合,以达到一目了然的效果。常见的分组标签有<fieldest>和<legend>标签

• <fieldest>标签可以看作是表单的一个子容器将所包含的内容以边框环绕的方式显示

• <legend>标签这是为<fieldest>边框添加相关的标题

<fieldset>
	<legend>请选择个人爱好</legend>
	<input type="checkbox" name="hobby" value="music"/> 音乐<br>
	<input type="checkbox" name="hobby" value="swimming"/> 游泳<br>
	<input type="checkbox" name="hobby" value="football"/> 足球<br>
</fieldset>