HTML学习篇（八） 表单

<form>、<label>、<input>等

在HTML5中，表单的填写提交使用form标签，然后里面包含各种文字标签和输入项（文字输入框、单选按钮、多选按钮等），还有按钮等。

下面是一个简单的HTML表单：

<form action="/submitToServer" method="post">
	<div>
	  <label for="name">名字：</label> <input type="text" id="name" name="user_name">
	</div>
	<div>
	  <label for="mail">E-mail：</label> <input type="email" id="mail" name="user_mail">
	</div>
	<div>
	  <label for="msg">信息：</label> <textarea id="msg" name="user_message"></textarea>
	</div>
	<div class="button">
	  <button type="submit">提交</button>
	</div>
</form>

 

<form>内的action和method属性分别用来指定提交表单数据的目标地址（URL）以及HTTP的请求方式（post或get）。

<label>是表单项的文字标签，可以使用for属性来指定绑定的表单输入项（input的id属性），通过绑定可以点击标签将焦点定位到对应表单项。

<input>根据type属性的不同来显示不同的表单项，默认就是这里的"text"，代表单行文本输入，另外还有email、radio和checkbox等，详情可参考input类型。

<textarea>跟input类似，但是可以输入多行的文本，详细的属性控制可参考<textarea>。

<button>设置type为“submit”，即将数据发送到服务器，而type默认是"button"（点击无任何响应，需要自己写JavaScript指定响应操作）。

另外值得一提的是，<input>也可以指定type为“button”，默认显示的效果与<button>一样，但是<input>所对应的按钮只能通过value属性来指定按钮文字，因此不受CSS的影响。