表单是HTML中获取用户输入的的手段。一个基本的表单实例如下:
<form action="form_action.asp" method="get">
<p>First name: <input type="text" name="fname" /></p>
<p>Last name: <input type="text" name="lname" /></p>
<input type="submit" value="Submit" />
</form>
action属性值为提交的地址。method属性指定了用来将表单数据发送到服务器的HTTP方法,允许的值为get和post,默认值为get。get请求用于安全交互,同一个请求可以发起任意多次而不会产生额外作用。post请求则用于不安全交互,提交数据的行为会导致一些状态的改变。具体区别可以参考get与post区别。
表单主要是input元素,常用input标签如下:
常用input标签
button 定义可点击按钮(多数情况下,用于通过 JavaScript 启动脚本)。
checkbox 定义复选框。
file 定义输入字段和 "浏览"按钮,供文件上传。
hidden 定义隐藏的输入字段。
image 定义图像形式的提交按钮。
password 定义密码字段。该字段中的字符被掩码。
radio 定义单选按钮。
reset 定义重置按钮。重置按钮会清除表单中的所有数据。
submit 定义提交按钮。提交按钮会把表单数据发送到服务器。
text 定义单行的输入字段,用户可在其中输入文本。默认宽度为 20 个字符。
其它常用输入元素还有select和textarea
<select>
<option value ="volvo">Volvo</option>
<option value ="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<textarea rows="3" cols="20">
test
</textarea>
select 元素可创建单选或多选菜单
textarea 元素定义多行的文本输入控件
常用label元素将字段与标签关联
<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>
label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。<label> 标签的 for 属性应当与相关元素的 id 属性相同。
fieldset与legend
<fieldset>
<legend>健康信息</legend>
身高:<input type="text" />
体重:<input type="text" />
</fieldset>
fieldset 元素可将表单内的相关元素分组,legend 元素为fieldset 元素定义标题。