HTML5 表单基础

表单

表单是什么？它是提供给使用者在网页输入某种信息，以提供给服务器、数据库的一种工具。举个例子，我们在上网过程中一些网站可能会让填一些数据（注册信息，留言等等），点击发送或者上传，这些数据就会提交给服务器或者数据库，可能会收到反馈，这就是表单最基本的作用。

1. 表单功能结构
标记结构：

<form>
	...
</form>

属性	属性值	说明
name	字符串	表单名称
method	get/post	表单传输方式（显示/隐藏）
action	url	传输目标

2. 文本栏

属性	属性值
类型type	text（默认）、number、image、password（显示*）、hidden（隐藏）、checkbox（复选框）、radio（单选框）、submit、reset等
名称name	自定义
内定值value	自定义
栏位宽度size	数字
栏位最大输入数maxlength	数字
只读readonly	readonly
禁用disabled	disabled
已选	checked（）

<input type="text" name="名称" value="内定值" size="30" maxlength="5" readonly>

tips：name在表单外形方面无影响，但是会在被JavaScript识别**，所有需要有名称name。

3. 单选栏、复选栏

• 单选栏

<input type=”radio” name=”名称” value=”内定值” checked disabled>

tips：多个单选栏名称一致时，只能选一个

• 复选栏

<input type=”checkbox” name=”名称” value=”内定值” checked disabled>

4. 窗体栏位、区块栏位

• 窗体选项栏位设置

<select name=”栏位名称”size=”数字（默认1）” multiple（多选）>
	<option value=”选项值”selected=”selected”>
	<option value=”选项值”>
	......
	<option value=”选项值”>
</select> 

分组

<select name=”栏位名称”size=”数字（默认1）” multiple（多选）>
	<optgroup label="分组名称">名称
		<option value=”选项值”>选项
		...
		<option value=”选项值”>选项
	</optgroup> 
	<optgroup label="分组名称">名称
		<option value=”选项值”>选项
		...
		<option value=”选项值”>选项
	</optgroup> 
</select> 

• 文字区块栏位设置

<textarea cols=”长度” rows=”宽度”>
	//文本区
</textarea>

5. 按钮

• 按钮设置

<input type=”submit” value=”按钮中显示的文字”>		//提交按钮
<input type=”reset” value=”按钮中显示的文字”>		//重置按钮

• 按钮图像

<button type="按钮功能">
		<img src=“url”>
	</button>

• 图像按钮

<input type="image" src="url" alt="文本">

区别：按钮图像是在button中插图片，图片按钮是这张图片就是一个普通按钮
6. 允许上传文件

<input type="file" name="file">

7. 表单的外框和标题

• 外框

<fieldset>
	...
</fieldset>

• 标题

<legend>
	...
</legend>