【前端学习整理】HTML（5）：HTML表单

一个简单的表单

<!-- 表单是一个包含表单元素的区域。
			 表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。 -->
		<form action="http://www.runoob.com/try/demo_source/html_form_action.php" method="get">
			昵称: <input type="text" name="name"><br>
			<!-- input是最常用的输入标签 输入类型通过type来定义 text代表文本域类型 name属性为控件命名，以备后台程序ASP、PHP使用-->
			账号: <input type="text" name="user"><br>
			注册: <input type="submit" value="Submit">
			<!--通过修改type的值来修改输入框的类型 submit定义了一个提交按钮，点击提交按钮会把输入的数据传输到表单属性action的目标地址文件中，通常这个文件会对接受的数据进行处理 -->
			<!-- value指的是输入框中的值，也是点击提交按钮后提交数据到服务器的值 -->
		</form>

显示效果如图：

不同类型的表单

<!-- HTML表单用于收集不同的用户输入
	表单本身是不可见的。并且注意一个文本字段的默认宽度是20个字符。 -->
<form action="">
	Username: <input type="text" name="user"><br>
	Password: <input type="password" name="password"><br>
	<!-- password为密码输入框，输入内容在页面上被遮挡-->
	<input type="radio" name="sex" value="male">Male<br>
	<input type="radio" name="sex" value="female">Female<br>
	<!-- radio类型为单选框 同一组单选按钮name取名一定要一致，这样同一组单选按钮才可以起到单选的作用-->
	<input type="radio" name="sex" value="demo" checked="checked">demo<br>
	<!-- 给单选框添加checked="checked"时该选项默认被选中 -->
	<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
	<input type="checkbox" name="vehicle" value="Car">I have a car <br>
	<!-- checkbox类型为复选框 -->
	<input type="button" value="按钮">
	<!-- button定义了一个按钮 修改value的值可以自定义按钮上的文字 -->
</form>
<hr>

<form action="">
	<select name="cars">
		<!-- 使用select元素创建一个下拉菜单，option元素创建该下拉菜单的选项 -->
	<option value="volvo">Volvo</option>
	<option value="saab">Saab</option>
	<option value="fiat" selected>Fiat</option>
		<!-- 给option元素添加selected属性让该项变成默认选择项 -->
	<option value="audi">Audi</option>
</form>

<textarea rows="10" cols="30">
我是一个文本框。
</textarea>
	<!-- textarea元素创建一个文本输入框，rows为行数，cols为每行列数 -->

显示效果如图：

使用表单发送邮件

<h3>发送邮件到 someone@example.com:</h3>
		
		<form action="mailto:someone@example.com" method="post" enctype="text/plain">
			<!-- 使用表单发送电子邮件同a标签类似，不过这里是在action属性中使用mailto:填写邮件地址，并且要使用method属性定义发送方法，而后在表单内使用submit提交 -->
		Name:<br>
		<input type="text" name="name" value="your name"><br>
		E-mail:<br>
		<input type="text" name="mail" value="your email"><br>
		Comment:<br>
		<input type="text" name="comment" value="your comment" size="50"><br><br>
		<input type="submit" value="发送">
		<input type="reset" value="重置">
		<!-- reset重置表单所有内容 -->
		</form>

显示效果如图：