HTML 表单和输入

最新推荐文章于 2022-05-17 19:14:36 发布

冷月醉雪

最新推荐文章于 2022-05-17 19:14:36 发布

阅读量363

点赞数 1

分类专栏： HTML 文章标签： HTML 表单输入框

本文链接：https://blog.csdn.net/lengyuezuixue/article/details/80175860

版权

HTML 专栏收录该内容

68 篇文章 0 订阅

订阅专栏

HTML表单用于收集不同类型的用户输入。

HTML表单

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容的，比如：文本域(textarea)、下拉列表、单选框(radio-buttons),复选框(checkboxes)等等。

表单使用表单标签<form>来设置

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title>自选教程(如约智惠.com)</title>
	</head>
	<body > 
		<form action="">
			First name:<input type="text" name="firstname"><br />
			Last name :<input type="text" name="lastname">
		</form>
		<p>
			<b>注意：</b>表单本身不可见，并且注意一个文本字段的默认宽度是20个字符。
		</p>
	</body>
</html>

HTML 表单--输入元素

文本域(Text Fields)

文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

注意:表单本身并不可见。同时，在大多数浏览器中，文本域的缺省宽度是20个字符。

密码字段

密码字段通过标签<input type="password"> 来定义:

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title>自选教程(如约智惠.com)</title>
	</head>
	<body > 
		<form action="">
			Username:<input type="text" name="user‘"><br />
			Password:<input type="password" name="password">
		</form>
		<p>
			<b>注意：</b>密码字段中的字符是隐藏的(显示为星号或圆圈)。
		</p>
	</body>
</html>

单选按钮(Radio Buttons)

<input type="radio"> 标签定义了表单单选框选项

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title>自选教程(如约智惠.com)</title>
	</head>
	<body > 
		<form action="">
			<input type="radio" name="sex" value="male">Male<br />
			<input type="radio" name="sex" value="female">Female
		</form>
	</body>
</html>

复选框(Checkboxes)

<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title>自选教程(如约智惠.com)</title>
	</head>
	<body > 
		<form action="">
			<input type="checkbox" name="vechicle" value="Bike">I hava a bike<br />
			<input type="checkbox" name="vechicle" value="Car">I hava a car
		</form>
	</body>
</html>

提交按钮（submit Button)

<input type="submit"> 定义了提交按钮.

当用户单击确认按钮时，表单的内容被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title>自选教程(如约智惠.com)</title>
	</head>
	<body > 
		<form action="html_form_action.php" name="input" method="get">
			Username: <input type="text" name="user" >
			<input type="submit" value="Submit">
	</form>
	</body>
</html>

假如您在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 "html_form_action.php" 的页面。该页面将显示出输入的结果。

实例

带边框的表单

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title>自选教程(如约智惠.com)</title>
	</head>
	<body > 
		<form action="">
			<fieldset>
				<legend>Personal information:</legend>
				Name: <input type="text" size="30"> <br />
				E-mail: <input type="text" size="30"> <br />
				Date of birth: <input type="text" size="10" >
			</fieldset>
		</form>
	</body>
</html>

下拉框

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title>自选教程(如约智惠.com)</title>
	</head>
	<body > 
		<form action="">
			<select name="cars">
				<option value="volvo">Volvo</option>
				<option value="saab">Saab</option>
				<option value="fiat" selected>Fiat</option>
				<option value="audi">Audi</option>
			</select>
		</form>
	</body>
</html>

文本域

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title>自选教程(如约智惠.com)</title>
	</head>
	<body > 
		<textarea rows="10" cols="300" >
我是一个文本框。
		</textarea>
	</body>
</html>

创建按钮

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title>自选教程(如约智惠.com)</title>
	</head>
	<body > 
		<input type="button" value="Hello world!">
	</body>
</html>

带有输入框和确认按钮的表单

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title>自选教程(如约智惠.com)</title>
	</head>
	<body > 
		<form action="demo-form.hph">
			First name: <input type="text" name="FirstName" value="Mickey"> <br />
			Last name:<input type="text" name="LastName" value="Mouse"><br />
			<input type="submit" value="提交">
		</form>
		<p>点击"提交"按钮，表单数据将被传送到服务器上的"demo-form.php"</p>
	</body>
</html>

带有复选框的表单

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title>自选教程(如约智惠.com)</title>
	</head>
	<body > 
		<form action="demo-form.hph">
			<input type="checkbox" name="vehicle[]" value="Bike"> I have a bike<br>
			<input type="checkbox" name="vehicle[]" value="Car"> I have a car<br>
			<input type="submit" value="提交">
		</form>
		<p>点击"提交"按钮，表单数据将被传送到服务器上的"demo-form.php"</p>
	</body>
</html>

从表单发送电子邮件

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title>自选教程(如约智惠.com)</title>
	</head>
	<body > 
		<h3>发送邮件到someone@example.com:</h3>
		<form action="MAILTO:someone@example.com" method="post" enctype="text/plain">
			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>
			<input type="submit" value="发送">
			<input type="reset" value="重置">
		</form>
	</body>
</html>

HTML 表单标签

笔记

<input type="reset">定义重置按钮

点击之后会将重置按钮所在的表单中填写的内容清空。

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title>自选教程(如约智惠.com)</title>
	</head>
	<body > 
		<form action="demo-form.php" >
			Email: <input type="text" name="email"><br>
			Pin: <input type="text" name="pin" maxlength="4"><br>
			<input type="reset" value="重置">
			<input type="submit" value="提交">
		</form>
		
		<p>点击重置按钮重新设置表单。</p>
		
	</body>
</html>

表单中的单选按钮可以设置以下几个属性：value、name、checked

value：提交数据到服务器的值（后台程序PHP使用）
name：为控件命名，以备后台程序 ASP、PHP 使用
checked：当设置 checked="checked" 时，该选项被默认选中

<form>
<p>你生活在哪个国家？</p>
<input type="radio" name="country" value="China" checked="checked">中国<br />
<input type="radio" name="country" value="the USA">美国
</form>
<p><b>注意：</b>同一组的单选按钮，name 取值一定要一致，比如上面例子为同一个名称“country”，这样同一组的单选按钮才可以起到单选的作用。</p>