HTML基础——表单的应用
爱好HtmlCssJs 2019-12-13
1、表单的构成
一个完整的表单由表单控件(表单元素)、提示信息和表单域3个部分构成。
- 表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、搜索框等。
- 提示信息：一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。
- 表单域：相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过它定义、处理表单数据所用程序的url地址及数据提交到服务器的方法。
注：如果不定义表单域，表单中的数据就无法传送到后台服务器。
2、创建表单
<form></form>标记被用于定义表单域，即创建一个表单。
基本格式：
<html>
<head>
<title>创建表单</title>
<meta charset="utf-8"/>
</head>
<body>
<form action="http://www.mysite.cn/index.asp" method="post">
<!--表单域-->
账号: <!--提示信息-->
<input type="text" name="zhanghao" /> <!--表单控件-->
密码: <!--提示信息-->
<input type="password" name="mima" /> <!--表单控件-->
<input type="submit" value="提交" /> <!--表单控件-->
</form>
</body>
</html>注：<form></form>中的所有内容都会被提交给服务器。
3、表单属性
①.action属性：用于指定接收并处理表单数据的服务器程序的url地址。
例如：
<form action="form_action.asp"> <!--提交订单时，表单数据会传送到名为"form_action.asp"的页面去处理-->
注：action的属性值可以是相对路径和绝对路径，还可以为接收数据的E-mail邮箱地址。
<form action=mailto:> <!--提交表单时，表单数据会以电子邮件的形式传递出去-->
②.method属性：用于设置表单数据的提交方式。(取值为get或post)
例如:
<form action="form_action.asp" method="get">
- get方法：浏览器将会按照下面两步来发送数据。首先：浏览器与action属性中指定的表单处理服务器建立联系，然后直接在一个传输步骤中发送所有的表单数据。
- post方法：分两步来发送数据。首先：浏览器将于action属性中指定的表单处理服务器建立联系，然后，浏览器按分段传输的方法将数据发送给服务器。
注：get方法保密性差，不能大量传输数据。post方法保密性强，能大量传输数据。一般使用post方法。
③.name属性：name属性用于指定表单的名称。
用于指定表单的名称。
④.autocomplete属性
用于指定表单是否有自动完成功能。autocomplete属性有2个值，对他们的解释如下。
- on：表单有自动完成功能。
- off：表单无自动完成功能。
例如:
<html>
<head>
<title>autocomplete属性的使用</title>
<meta charset="utf-8"/>
</head>
<body>
<form id="formBox" autocomplete="on">
用户名:
<input type="text" id="autofirst" name="autofirst" /><br/><br/>
昵 称:
<input type="text" id="autosecond" name="autosecond"/><br/><br/>
<input type="submit" value="提交"/>
</form>
</body>
</html>⑤.novalidate属性：指定在提交表单时取消对表单进行有效的检查。
例如：
<html>
<head>
<title>novalidate属性取消表单验证</title>
<meta charset="utf-8"/>
</head>
<body>
<form action="form_action.asp" method="get" novalidate="true">
请输入电子邮件地址:<input type="email" name="user_email"/>
<input type="submit" value="提交"/>
</form>
</body>
</html>4、input元素及属性
用途：<input />元素是表单中最常见的元素，网页中常见的有单行文本框、单选按钮、复选框等都是通过它定义的。
input元素的相关属性：
（1）、input元素的type属性：用于定义不同的控件类型。
①.单行文本输入框<input type="text" />单行文本输入框常用来输入简短的信息，如用户名、账号、证件号码等，常用的属性有name、value、maxlength。②.密码输入框<input type="password" /> 密码输入框用来输入密码，其内容将以圆点的形式显示。③.单选按钮<input type="radio" /> 注： 定义单选按钮时，必须为同一组中的选项指定相同的name值，这样"单选"才会生效。 可以对单选按钮应用checked属性，指定默认选中项。④.复选框<input type="checkbox" /> 可对其应用checked属性，指定默认选中项。⑤.普通按钮<input type="button" /> 通常配合javascript脚本语言使用。⑥.提交按钮<input type="submit" /> 是表单的核心控件，用来在页面中使用户单击提交表单数据。 可以对其应用value属性，改变提交按钮上的默认文本。⑦.重置按钮<input type="reset" /> 当用户输入的信息有误时，可单击重置按钮取消已输入的所有表单信息。 可以对其应用vale属性，改变重置按钮上的默认文本。⑧.图像形式的提交按钮<input type="image"> 定义图像形式的提交按钮，必须为其定义src属性指定图像的url地址。⑨.隐藏域<input type="hidden" /> 隐藏域对于用户是不可见的，通常用于后台的程序。⑩.文件域<input type="file" /> 当定义文件域时，页面中将出现一个文本框和一个“浏览...”按钮，用户可以通过填写文件路径或直接选择文件的方式，将文件提交给后台服务器。
代码示例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>input控件</title>
</head>
<body>
<form action="#" method="post">
用户名： <!--text单行文本输入框-->
<input type="text" value="张三" maxlength="6" /><br/><br/>
密码： <!--passord密码输入框-->
<input type="password" size="40" /><br/><br/>
性别： <!--radio单选按钮-->
<input type="radio" name="sex" checked="checked" />男
<input type="radio" name="sex" />女<br/><br/>
兴趣： <!--checkbox复选框-->
<input type="checkbox" />唱歌
<input type="checkbox" />跳舞
<input type="checkbox" />游泳<br/><br/>
上传头像：
<input type="file" /><br/><br/> <!--file文件域-->
<input type="submit" /> <!--submit提交按钮-->
<input type="reset" /> <!--reset按钮重置-->
<input type="button" value="普通按钮" /> <!--button提交按钮-->
<input type="image" src="images/login.gif" /> <!--image图像域-->
<input type="hidden" /> <!--hidden隐藏域-->
</form>
</body>
</html>?email类型<input type="email" /> 专门用来输入E-mail地址的文本输入框。会自动验证输入内容是否符合E-mail邮件地址格式。 ?url类型<input type="url" /> 专门用来输入URL地址的输入框。有自动检查功能。?tel类型<input type="tel" /> 用于提供输入电话号码的输入框。通常会和pattern属性配合使用。?search类型<input type="search" /> 专门用于输入搜索关键字的文本框。?color类型<input type="color" /> 专门用于提供设置颜色的文本框，用于实现一个RGB颜色输入。
代码示例:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>input类型</title>
</head>
<body>
<form action="#" method="get">
请输入您的邮箱:
<input type="email" name="formmail" /><br/>
请输入个人网址:
<input type="url" name="user_url" /><br/>
请输入电话号码:
<input type="tel" name="telphone" pattern="^\d{11}$" /><br/>
输入搜索关键词:
<input type="search" name="searchinfo" /><br/>
请选取一种颜色:
<input type="color" name="color1" />
<input type="color" name="color2" value="#FF3E96" />
<input type="submit" value="提交" />
</form>
</body>
</html>?number类型<input type="number" /> 用于提供输入数值的文本框。有自动检查功能。 可以对输入的数字进行限制，规定允许最大值和最小值，合法的数字间隔或默认值等。 ◆value：指定输入框的默认值 ◆max：指定输入框可以接受的最大的输入值 ◆min：指定输入框可以接受的最小的输入值 ◆step：输入与合法的间隔，如果不设置，默认值为1
代码示例:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>number类型的使用</title>
</head>
<body>
<form action="#" method="get">
请输入数值:
<input type="number" name="number1" value="1" min="1" max="20" step="4"/><br/>
<input type="submit" value="提交"/>
</form>
</body>
</html>?range类型<input type="range" /> 用于提供一定范围内数值的输入范围，在页面中显示为滑动条。常用属性与number相同。通过step属性指定每次滑动的步幅。?Date pickers类型<input type="data,nonth,week..." /> 时间日期类型：用于验证输入的日期； date 选取日、月、年 month 选取月、日 week 选取周和年 time 选取时间(小时和分钟) datetime 选取时间、日、月、年(UTC时间) detetime-local 选取时间、日、月、年(本地时间)
代码示例:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>时间日期类型的使用</title>
</head>
<body>
<form action="#" method="get">
<input type="date" />
<input type="month" />
<input type="week" />
<input type="time" />
<input type="datetime" />
<input type="datetime-local" />
<input type="submit" value="提交" />
</form>
</body>
</html>（2）、input元素的其他属性
①autofocus属性：用于指定页面加载后是否自动获取鼠标焦点。
代码示例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>autofocus属性的使用</title>
</head>
<body>
<form action="#" method="get">
请输入搜索关键词:
<input type="text" name="user_name" autocomplete="off" autofocus="autofocus" /><br/>
<input type="submit" value="提交" />
</form>
</body>
</html>②form属性： 可以把表单内的子元素写在页面中的任意位置，只需为这个元素指定form属性并设值属性值为该表单的id即可。 此外，form属性还允许规定一个表单控件从属于多个表单。
代码示例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>autocomplete属性的使用</title>
</head>
<body>
<form id="formBox" autocomplete="on">
用户名：
<input type="text" id="autofirst" name="autofirst"/><br/><br/>
昵 称:
<input type="text" id="autosecond" name="autosecond"/><br/><br/>
<input type="submit" value="提交"/>
</form>
</body>
</html>③list属性： 用于指定输入框所绑定的datalist元素，其值是个datalist元素的id。 datalist元素用于试下年数据列表的下拉效果。
代码示例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>list属性的使用</title>
</head>
<body>
<form action="#" method="get">
请输入网址:
<input type="url" list="url_list" name="weburl"/>
<datalist id="url_list">
<option label="新浪" value="http://www.sina.com.cn"></option>
<option label="搜狐" value="http://www.sohu.com"></option>
<option label="传智" value="http://www.itcast.cn"></option>
</datalist>
<input type="submit" value="提交" />
</form>
</body>
</html>④multiple属性： 用于指定输入框可以选择多个值，该属性适用于email和file类型的input元素。 注： multiple属性用于email类型的input元素时，表示可以向文本框中输入多个E-mail地址，用逗号隔开。 multiple属性用于file类型的input元素时，表示可以选择多个文件。
代码示例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>multiple属性的使用</title>
</head>
<body>
<form action="#" method="get">
电子邮箱:
<input type="email" name="myemail" multiple="multiple"/> (如果电子邮箱有多个,请使用逗号分隔)<br/><br/>
上传照片:
<input type="file" name="selfile" multiple="multiple" /><br/><br/>
<input type="submit" value="提交"/>
</form>
</body>
</html>⑤min、max、step属性： 用于为包含数字或日期的input输入类型规定限制。适用于date、pickers、number和range标签。 ●max：规定输入框所允许的最大输入值。 ●min：规定输入框所允许的最小输入值。 ●step：为输入框规定合法的数字间隔，如果不设置，默认值是1。 ⑥pattern属性： 用于验证input类型输入框中，用户输入的内容是否与所定义的正则表达式相匹配。 pattern属性适用于的类型是：text、search、url、tel、email和password的<input/>标记。
代码示例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>pattern属性</title>
</head>
<body>
<form action="#" method="get">
账 号：<input type="text" name="username" pattern="^[a-zA-Z][a-zA-Z0-9_]{4,15}$" />(以字母开头,允许5~16字节,允许字母数学下划线)<br/>
密 码：<input type="password" name="pwd" pattern="^[a-zA-Z]\w{5,17}$" />(以字母开头，长度在6~18，只能包括字母、数字和下划线)<br/>
身 份 证：<input type="text" name="mycard" pattern="^\d{15}|\d{15}|\d{18}$" />(15位、18位数字)<br/>
E-mail地址:<input type="email" name="myemail" pattern="^\w+([-+.]\w+)*@\w+([-.]\ w+)*\.\w+([-.]\w+)*$" />
<input type="submit" value="提交" />
</form>
</body>
</html>⑦placeholder属性 用于为input类型的输入框提供相关提示信息，以描述输入框期待用户输入何种内容。 在输入框为空时显式出现，而当输入框获得焦点时则会消失。注：该属性适用于type属性值为text、search、url、tel、email及password的<input/>标记
代码示例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>placeholder属性</title>
</head>
<body>
<form action="#" method="get">
请输入邮政编码:<input type="text" name="code" pattern="[0-9]{6}" placeholder="请输入6位数的邮政编码" />
<input type="submit" value="提交" />
</form>
</body>
</html>⑧required属性 用于规定输入框填写的内容不能为空，否则不允许用户提交表单。
代码示例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>required属性</title>
</head>
<body>
<form action="#" method="get">
请输入姓名：<input type="text" name="user_name" required="required"/>
<input type="submit" value="提交"/>
</form>
</body>
</html>（3）、其他表单元素
①、textarea元素
通过textarea控件可以轻松的创建多行文本输入框。
格式：<textarea cols="每行中的字符数" rows="显示的行数">
文本内容
</textarea>cols和rows为<textarea>标记的必须属性。
其中cols用来定义多行文本输入框每行中的字符数，rows用来定义多行文本输入框显示的行数。
他们的取值均为正整数。
textarea的可选属性
name 由用户自定义 控件的名称
readonly readonly 该空间内容为只读(不能编译修改)
disabled disabled 第一次加载页面时禁用该标签(显示为灰色)代码示例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>textarea控件</title>
</head>
<body>
<form action="#" method="post">
评论:<br/>
<textarea cols="60" rows="8">
评论的时候，请遵纪守法并注意语言文明，多给文档分享人一些支持。
</textarea>
<input type="submit" value="提交"/>
</form>
</body>
</html>②、select元素
用来定义页面的下拉菜单。
基本格式：
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>注：
<option></option>标记嵌套在<select></select>标记中，用于定义下拉菜单中的具体选项。
每对<select></select>中至少应包含一对<option></option>。| 标记名 | 常用属性 | 描述 |
| <select> | size | 指定下拉菜单的可见选项数(取值为正整数) |
| multiple | 定义multiple="multiple"时，下拉菜单将具有多项选择的功能，方法为按住Ctril键的同时选择多项 | |
| <option> | selected | 定义selecet="selecet"时,当前项即为默认选中项 |
代码示例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>select控件</title>
</head>
<body>
<form action="#" method="post">
所在校区：<br />
<select>
<option>-请选择-</option>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>武汉</option>
<option>成都</option>
</select><br /><br />
特长:(单选):<br />
<select>
<option>唱歌</option>
<option selected="selected">画画</option> <!--设置默认选中项-->
<option>跳舞</option>
</select><br /><br />
爱好(多选):<br />
<select multiple="multiple" size="4"> <!--设置多选和可见选项数-->
<option>读书</option>
<option selected="selected">写代码</option> <!--设置默认选中项-->
<option>旅行</option>
<option selected="selected">听音乐</option> <!--设置默认选中项-->
<option>踢球</option>
</select><br /><br />
<input type="submit" value="提交"/>
</form>
</body>
</html> 
相关推荐
learningever 0喜欢 / 0评论 2020-09-19
nercon 0喜欢 / 0评论 2020-07-26
运维工程师日记 0喜欢 / 0评论 2020-07-19
haohong 0喜欢 / 0评论 2020-07-18
dadaooxx 0喜欢 / 0评论 2020-07-04
行吟阁 0喜欢 / 0评论 2020-06-26
dadaooxx 0喜欢 / 0评论 2020-06-13
qsdnet我想学编程 0喜欢 / 0评论 2020-06-09
pythonclass 0喜欢 / 0评论 2020-06-07
pythonclass 0喜欢 / 0评论 2020-06-04
lyg0 0喜欢 / 0评论 2020-06-04
WebVincent 0喜欢 / 0评论 2020-06-03
niehanmin 0喜欢 / 0评论 2020-05-28
pythonclass 0喜欢 / 0评论 2020-05-09
gufudhn 0喜欢 / 0评论 2020-04-30
行吟阁 0喜欢 / 0评论 2020-04-18
swiftwwj 0喜欢 / 0评论 2020-03-08
nercon 0喜欢 / 0评论 2020-03-03
玫瑰小妖 0喜欢 / 0评论 2020-02-24
行吟阁 0喜欢 / 0评论 2020-02-23
pythonclass 0喜欢 / 0评论 2020-02-03
黎豆子 0喜欢 / 0评论 2020-02-02
WangJiangNan 0喜欢 / 0评论 2020-01-07
sunlizhen 0喜欢 / 0评论 2020-01-10
nercon 0喜欢 / 0评论 2019-12-28
GATSBYER 0喜欢 / 0评论 2014-07-13
Norsaa 0喜欢 / 0评论 2019-12-11
HSdiana 0喜欢 / 0评论 2019-11-10
pythonclass 0喜欢 / 0评论 2019-11-07
zhangli 0喜欢 / 0评论 2014-06-24
typhoonpython 0喜欢 / 0评论 2019-11-03
renpinghao 0喜欢 / 0评论 2019-11-03
fengent 0喜欢 / 0评论 2018-09-14
玫瑰小妖 0喜欢 / 0评论 2019-10-29
爱好HtmlCssJs 0喜欢 / 0评论 2019-10-28
HSdiana 0喜欢 / 0评论 2019-10-24
爱好HtmlCssJs 0喜欢 / 0评论 2019-10-23
csxiaoqiang 0喜欢 / 0评论 2019-10-21
xuanbai 0喜欢 / 0评论 2015-04-11
纯屌丝程序猿 0喜欢 / 0评论 2015-05-26
谷歌架构师 0喜欢 / 0评论 2016-04-15
wenhuadream 0喜欢 / 0评论 2016-04-19
hong 0喜欢 / 0评论 2017-02-24
谷歌架构师 0喜欢 / 0评论 2017-12-27
PioneerFan 0喜欢 / 0评论 2018-01-13
二毛妮子 0喜欢 / 0评论 2019-09-05
zZoOoOJaVa 0喜欢 / 0评论 2018-02-19