HTML5表单元素
一、表单控件
1.<form>元素
用于生成表单，属性如下
1. action指定表单的发送地址（服务器地址）
2. method是表单数据发送至服务器的方法，常用的有两种：get、post，用的input 的type属性值是submit，“提交”是这个按钮value属性的默认值
3. get和post的区别：
（1）get方法提交，数据会附在网址之后主动提交给服务器
（2）post方法提交数据不会附在网址后，会将数据打包发送给服务器，等候服务器来读取数据进行处理
4. 还可以添加一个target属性，指定在新窗口打开
2. Input元素
（1）type属性：指定输入内容的类型，默认为text，单行文本框，还有password、submit、reset、button这些值
文本框 <input type = "text" />
密码框 <input type = "password" />
隐藏域 <input type = "hidden" />
文本域 <textarea></textarea>
按钮类：
普通按钮 <input type = "button" value = "text" />
提交按钮 <input type = "submit" value = "提交" />
重置按钮 <input type = "reset" value = "重置" />
图片按钮 <input type = "image" />
（2）还有其他比较重要的属性，例如：
checked : 表示默认被选中，只有当type为checkbox和radio是才可以使用
disbale：设置禁用该元素，不可以被提交
maxlength：这是文本框的最大长度
readonly：=不允许被修改，可以被提交
size：指定元素的宽度
src：指定图像的URL
我们用一个小例子来实现上面的元素和属性图。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单元素</title>
</head>
<body>
<form action="表单元素标签" method="post">
单行文本框：<input type="text" name="username"/><br />
不能编辑的文本框：<input type="text" name="disableUserName" readonly="readonly" /><br />
不能提交的文本框：<input type="text" name="disableUserName" disabled="disabled" /><br />
密码框：<input type="password" name="password" /><br />
隐藏域：<input type="hidden" name="hid" value="隐藏域" /><br />
提交：<input type="submit" value="提交" /><br />
重置：<input type="reset" value="重置" /><br />
第一组单选框<br />
红：<input type="radio" name="color" value="红" checked="checked"/>
绿：<input type="radio" name="color" value="绿" />
蓝：<input type="radio" name="color" value="蓝" /><br />
第二组单选框<br />
男:<input type="radio" name="sex" value="男"/>
女：<input type="radio" name="sex" value="女" />
<br />
三个复选框：<br />
华为：<input type="checkbox" name="phone" value="华为" checked="checked"/>
苹果：<input type="checkbox" name="phone" value="苹果" />
三星：<input type="checkbox" name="phone" value="三星" />
<br />
文件上传域：<input type="file" name="file" /><br />
图像域：<input type="image" name="image" src="111.png" alt="Eclipse"/>Eclipse<br />
下面是四个按钮：<br />
<input type="button" id="btn1" value="按钮1" />
<input type="button" id="btn2" value="按钮2" />
<input type="button" id="btn3" value="按钮3" />
<input type="button" id="btn4" value="按钮4" />
</form>
</body>
</html>
页面如下
上一篇： HTML5--常见的新属性（中）
下一篇： HTML 表单制作