适合0基础的web开发系列教程-html中的表单

最新推荐文章于 2026-01-08 22:30:52 发布

转载最新推荐文章于 2026-01-08 22:30:52 发布 · 106 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yyjcw/p/10199284.html

文章标签：

#后端 #前端 #ViewUI

表单主要用于跟用户互动，收集客户端用户的数据。

比如：用户登录，用户注册，发布文章、添加产品等，只要有用户输入数据的地方或者填写文字的地方，就会有表单。

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

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

下面制作一个登录的表单：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form action="login.aspx" method="get">
		  <p>姓名：<input type="text" name="myusername" /></p>
		  <p>密码：<input type="password" name="mypassword" /></p>
		  <input type="submit" value="提交"/>
		</form>
	</body>
</html>

action="login.aspx" 表示点击提交按钮的时候，把表单数据提交给login.aspx页面处理。

method="get"：表示以get方式提交，除了get方式外，还有post提交也用的比较多，相比之下post提交更加安全。

<input type="text" name="myusername" />：表示输入用户名的文本框，type属性为text表示以文本的形式显示。

<input type="password" name="mypassword" /> ：表示密码框，type="password"表示在此表单元素里面输入内容的时候，显示圆点。
特别注意按钮 <input type="submit" value="提交"/>的type为submit，说明是一个具有提交功能的按钮，点击它就会自动提交表单，否则就是一个普通的按钮。普通按钮需要自己在点击事件里面编写提交的代码。


input标签的type类型不同，就是不同的html控件，就会表现出不同的特性，下面这个表格总结出input 的常用type：
 

类型

名称

特点

text

普通文本框

默认

password

密码框

内容显示为*号

submit

提交按钮

点击后就提示表单

button

普通按钮

 

reset

重置按钮

回到最初状态(注意：不是清空)

radio

单选

一组单选必需name相同

checkbox

多选

一组多选必需name相同

file

文件上传框

可以选择文件进行提交

hidden

隐藏域

隐藏控件，但是会被提交

image

图片按钮

必需配合src属性来展示

color

拾色器

 

date

日期字段

带有 calendar 控件

datetime

日期字段

 

datetime-local

日期字段

带有 calendar 和 time 控件

month

日期字段的月

带有 calendar 控件

week

日期字段的周

带有 calendar 控件

time

时、分、秒

带有 time 控件

email

邮箱格式

用于 e-mail 地址的文本字段

number

数字输入框

带有 spinner 控件的数字字段

range

数字输入框

带有 slider 控件的数字字段。

search

搜索框

用于搜索的文本字段

tel

电话号码

用于电话号码的文本字段

url

URL 文本框

用于 URL 的文本字段
下面是一个注册的表单，包含了普通文本框，密码框，单选，多选，下拉，多行文本框，文件域，时间，邮箱等，基本上涵盖了常用的表单元素，没有带任何样式，旨在给大家介绍html控件，不涉及任何css样式。
如果要做更加漂亮的表单，需要后续学完css教程。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>用户注册</title>
	</head>
	<body>
		<form action="login.aspx" method="get">
		  <p>姓名：<input type="text" name="myusername" /></p>
		  <p>密码：<input type="password" name="mypassword1" /></p>
		  <p>重复密码：<input type="password" name="mypassword2" /></p>
		  <p>加盟地区：<select><option value="1">成都</option><option value="2">北京</option><option value="3">上海</option> </select></p>
		  <p>加盟时间：<input type="date" name="entertime" /></p>
		  <p>年龄：<input type="number" name="age" /></p>
		  <p>性别：<input type="radio" name="sex" value="1" />男 <input type="radio" name="sex" value="0" />女</p>
		  <p>爱好：<input type="checkbox" name="hobby"  value="1"/>篮球<input type="checkbox" name="hobby"  value="1"/>足球<input type="checkbox" name="hobby"  value="3"/>乒乓球</p>
		  <p>电子邮箱：<input type="email" name="myemail" /></p>
		  <p>附件：<input type="file" name="myfile" /></p>
		  <p>个人介绍：<textarea name="brief"></textarea> </p>
		  <input type="submit" value="提交"/>
		</form>
	</body>
</html>

类型	名称	特点
text	普通文本框	默认
password	密码框	内容显示为*号
submit	提交按钮	点击后就提示表单
button	普通按钮
reset	重置按钮	回到最初状态(注意：不是清空)
radio	单选	一组单选必需name相同
checkbox	多选	一组多选必需name相同
file	文件上传框	可以选择文件进行提交
hidden	隐藏域	隐藏控件，但是会被提交
image	图片按钮	必需配合src属性来展示
color	拾色器
date	日期字段	带有 calendar 控件
datetime	日期字段
datetime-local	日期字段	带有 calendar 和 time 控件
month	日期字段的月	带有 calendar 控件
week	日期字段的周	带有 calendar 控件
time	时、分、秒	带有 time 控件
email	邮箱格式	用于 e-mail 地址的文本字段
number	数字输入框	带有 spinner 控件的数字字段
range	数字输入框	带有 slider 控件的数字字段。
search	搜索框	用于搜索的文本字段
tel	电话号码	用于电话号码的文本字段
url	URL 文本框	用于 URL 的文本字段

<select><option value="1">成都</option><option value="2">北京</option><option value="3">上海</option> </select>：表示下拉选项，里面的每个

option 代表一个选项，每个option都一个value,就是当前项的值。

<input type="radio" name="sex" value="1" />男 <input type="radio" name="sex" value="0" />女  表示一组单选，一组单选里面的多个input的name属性必须相同，value不同。

同理：

<input type="checkbox" name="hobby"  value="1"/>篮球<input type="checkbox" name="hobby"  value="1"/>足球<input type="checkbox" name="hobby"  value="3"/>乒乓球
表示一组多选框。同一组里面的多个input的name属性必须相同。