HTML表单元素详解-优快云博客

本文链接：https://blog.youkuaiyun.com/Honly_java/article/details/84278518

<from>标签

参考页面：http://www.w3school.com.cn/tags/tag_form.asp

一，定义和用法

<form> 标签用于为用户输入创建 HTML 表单。

表单能够包含input元素，比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含 menus、textarea、fieldset、legend和 label元素。

表单用于向服务器传输数据。

二，提示和注释

注释：form 元素是块级元素，其前后会产生折行。

三，实例

1，文本域和密码框

<form>
	用户：
	<input type="text" name="user">
	<br />
	密码：
	<input type="password" name="password">
</form>

2，单选框

<form>
	男性：
	<input type="radio" checked="checked" name="Sex" value="male" />
	<br />
	女性：
	<input type="radio" name="Sex" value="female" />
</form>

注意：name属性应该相同

3，复选框

<form>
	我喜欢自行车：
	<input type="checkbox" name="Bike">
	<br />
	我喜欢汽车：
	<input type="checkbox" name="Car">
</form>

4，简单的下拉列表

<form>
	<select name="cars">
		<option value="volvo">Volvo</option>
		<option value="saab">Saab</option>
		<option value="fiat" selected="selected">Fiat</option>
		<option value="audi">Audi</option>
	</select>
</form>

5,文本域

<textarea rows="10" cols="30">
The cat was playing in the garden.

6，创建按钮

<form>
	<input type="button" value="Hello world!">
</form>

7，围绕数据的FieldSet

<fieldset>
	<legend>健康信息：</legend>
	<form>
		<label>身高：<input type="text" /></label>
		<label>体重：<input type="text" /></label>
	</form>
</fieldset>

8,从表单发送电子邮件

<html>

	<body>
		<form action="MAILTO:testi@163.com" method="post" enctype="text/plain">

			<h3>这个表单会把电子邮件发送到 W3School。</h3>
			姓名：<br />
			<input type="text" name="name" value="yourname" size="20">
			<br />
			电邮：<br />
			<input type="text" name="mail" value="yourmail" size="20">
			<br />
			内容：<br />
			<input type="text" name="comment" value="yourcomment" size="40">
			<br /><br />
			<input type="submit" value="发送">
			<input type="reset" value="重置">

		</form>
	</body>
</html>