整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
<from></form>标签对用来创建一个表单，即定义表单的开始和结束位置，<form>标签具有下面等属性。
属性：size、value、maxlength、readonly、disabled
属性：checked
如何在列表中实现取消选项
属性：cols、rows
属性：for、accesskey
单属性汇总：
1 name属性
服务器会识别不同的name属性，并根据name属性来捕获不同元素内的数据。
2 value属性
value 属性为 input 元素设定值。
对于不同的输入类型，value 属性的用法也不同：
type="button", "reset", "submit" - 定义按钮上的显示的文本
type="text", "password", "hidden" - 定义输入字段的初始值
type="checkbox", "radio", "image" - 定义与输入相关联的值
注释：<input type="checkbox"> 和 <input type="radio"> 中必须设置 value 属性。
注释：value 属性无法与 <input type="file"> 一同使用。
注意：单选框和复选框传递数据到数据库时一定要设置value, 否则插入数据失败;
3 type属性
它决定了<input>标签在页面中的表现样式和功能
text 文本框
password 密码框
radio 单选框
checkbox 复选框
file 文件域
hidden 隐藏域
image 图像域
submit 提交按钮
reset 重置按钮
button 普通按钮
4 size属性
列表框中size属性用来设置列表框显示的行数；
文本框和密码框会使用size属性设置域的显示宽度；
5 disabled属性
定义disabled属性可以禁止使用该元素；
无法将数据提交到服务器处理;
6 readonly属性
常用在输入性表单对象中(如文本框、密码框、文本区域)，用来禁止输入任何信息；
可以将数据提交到服务器处理;
7 checked属性
它与disabled属性一样没有属性值，常用在选择性表单对象中，定义对象处于被选中状态(如单选按钮和复选框)
但在列表框或者下拉式菜单中，为了表示被选中的项目，可使用selected属性；
7 placeholder属性
规定帮助用户填写输入字段的提示。
表单对象：
1 文本框
<input type="text" name="textfield" id="textfield" value="单行文本框" size="20" maxlength="20">必需的属性:name type
2 密码域
<input type="password" name="passwordfield" id="passwordfield">必需的属性:name type
3 文本域
<textarea name="textarea" cols="20" rows="5" wrap="physical"></textarea>必需的属性:name cols rows
wrap属性 默认值：输入的文本会自动换行。当数据提交到服务器被处理时, 换行符不会随输入的文本一同被提交到服务器；
off(也可写成wrap)：不自动换行, 当输入的内容超出文本区域右边界时, 文本将向左滚动, 并显示滚动条。
如果希望换行，必须手动输入回车键才能将插入点移到下一行；
virtual：文本能够自动换行, 当数据提交到服务器被处理时, 换行符不会随输入文本一同提交到服务器；(默认值)
physical：文本能够自动换行, 当数据提交到服务器被处理时, 换行符将会随输入的文本一同被提交到服务器进行处理；
关于如何限制文本域输入字符串的长度 见javascript|语法|设置文本框
HTML5中wrap中属性值修改为hard|soft
soft 当在表单中提交时, textarea 中的文本不换行, 默认值。
hard 当在表单中提交时, textarea 中的文本换行(包含换行符)。
当使用 "hard" 时, 必须规定 cols 属性
4 单选按钮
单选按钮传递的信息简单，如1或0、True或False。
<input type="radio" name="radio" value="1"/>选项1
<input type="radio" name="radio" value="2"/>选项2
<input type="radio" name="radio" value="3"/>选项3多个单选按钮通过定义相同的name属性, 以实现捆绑在一起；
必需的属性:type name value
5 复选框
<input type="checkbox" name="checkbox[]" value="1"/>选项2
<input type="checkbox" name="checkbox[]" value="2"/>选项2
<input type="checkbox" name="checkbox[]" value="3"/>选项2通过设置相同的name属性可以把多个复选框捆绑在一起；
必需的属性:type name value
6 列表框/下拉菜单
<select name="select" size=1>
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
</select>如果select元素中不设置size属性,则该元素会显示为下拉菜单样式
<select name="select" size="1" multiple="multiple">
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
</select>如果希望以列表框形式显示,则可以使用size属性指定列表框的高度(显示几个选项);
还可以通过mutiple属性定义列表框是否为多选(默认是单选)；
通过<optgroup>标签把相关的选项组合在一起：
<select>
<optgroup label="PHP版块">
<option value="resource">资源共享</option>
<option value="study">学习交流</option>
<option value="salary">薪酬待遇</option>
</optgroup>
<optgroup label="IOS版块">
<option value="resource">资源共享</option>
<option value="study">学习交流</option>
<option value="salary">薪酬待遇</option>
</optgroup>
</select>注意：其中PHP版块和IOS版块不能被选中
所有主流浏览器都支持 <optgroup> 标签。
7 文件域
<input type="file" name="file"/>
<input type="file" name="file" multiple/>8 按钮
提交按钮
<input type="submit" name="" value="提交"/>name值必须给出
重置按钮
<input type="reset" name="" value="重置"/>普通按钮
<input type="button" name="" value="普通按钮"/>它一般是配合javascript来使用;
关于控制表单提交按钮见: javascript|语法|控制表单提交
9 图像域
<input type="image" name="image" value="提交" src="images/vote_d.gif" alt="提交" align="middle"/>10 隐藏域
限制上传文件大小
<input type="hidden" name="MAX_FILE_SIZE" value="1000000" />传递ID值
<input type="hidden" name="id" value="<?php echo $result['id'];?>" />11 button标签
在 button 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。
<button type="button" name="button" value="按钮"><img src="hw001.jpeg"/></button>普通按钮<button type="button">普通按钮</button> 它一般是配合javascript来使用, 默认值
提交按钮<button type="submit">提交按钮</button>
重置按钮<button type="reset">重置按钮</button>
提交表单
enctype属性
该属性包含两种方式:
application/x-www-form-urlencoded 是默认编码类型
multipart/form-data
multipart/form-data编码方式可以用来传输二进制数据或者非ASCII字符的文本(如图片、不同格式的文件等),上传文件必须使用此属性
multipart: 多部件的
multiple: 多重的
text/plain
text/plain将表单属性发送到电子邮箱时，enctype的值必须设为"text/plain",否则将会出现乱码。
发送电子邮件的表单程序
<form name="form1" method="post" action="mailto:marker@broadview.com.cn" enctype="text/plain">
</form>action 表单提交的脚本
如果传递到本页面，则直接输入控制 action=""
表单提交方式method:post/get
<form action="test.php?id=5" method="post" >
name: <input type="text" name="name" value="100">
</form>id=5是get传， name="100" 是post传！ //高洛峰解释
action="" 表示传递到当前脚本文件
target 指定提交到哪一个窗口
_blank 打开新窗口
_self 当前的窗口,默认值
_parent 上一层窗口
_top 最上层窗口
框架名称 指定指定窗口或框架名称
label标签
作用: 扩大触控区域, 为了提升用户体验, 点击文字也能选中表单
<form action=" method="get" accept-charset="utf-8">
<label>电子邮箱: <input type="text" name="email" value="" placeholder="请输入电子邮箱"/></label><br/>
<label>密码: <input type="password" name="password"/></label><br/>
<label for="address">地址</label>
<input type="text" name="address" id="address" placeholder="请输入地址" />
</form>for与id一致
<input type="radio" id="sec" name="sex"> <label for="sex">男</label>简化写法:
<label><input type="checkbox"/>周杰伦-晴天</label>注意: "for" 属性可把 label 绑定到另外一个元素。请把"for"属性的值设置为相关元素的 id 属性的值。
PHP实例：创建发送邮件信息的html表单
代码：
<html>
<head>
<title>简单邮件发送表单</title>
</head>
<body>
<h1>Mail Form</h1>
<form name="form1" method="post" action="simpleEmail.php">
<table>
<tr><td><b>To</b></td><td><input type="text" name="mailto" size="35"></td></tr>
<tr><td><b>邮件主题：</b></td>
<td><input type="text" name="mailsubject" size="35"></td></tr>
<tr><td><b>邮件内容</b></td>
<td><textarea name="mailbody" cols="50" rows="7"></textarea></td>
</tr>
<tr><td colspan="2">
<input type="submit" name="Submit" value="发送">
</td>
</tr>
</table>
</form>
</body>
</html>simpleEmail.php
表单的信息发送与处理过程可以简单的进行图示，如下图。
以注册会员为例，用户在自己的电脑上打开相应的注册表单页面填写信息，完成填写后点击提交按钮，也就是图中1所示过程。
这时浏览器会将这些信息发送给处理这些信息的服务器，服务器上有使用类似asp或php写成的相应的处理程序，处理完成后，生成一个反馈信息，也就是2到3的过程。
然后服务器将处理后的信息发送给个人电脑，个人电脑在浏览器上通过一个新页面来提示用户处理结果。
这里就涉及到一个问题，一个网站会有针对不同用户的信息注册表单以及相应的信息处理程序，比如我们注册头条号就有"个人"、"企业"、"媒体"和"国家机构"的区分。如何使不同的表单找到相应的处理程序呢？在<form>标签中，有一个action属性就是为这个表单信息指定处理程序的。
<form>中的action属性
调用程序
<form>的action属性实际上就是为表单提示处理程序所在的路径，如果程序和页面在一个服务器中存储，那使用相对路径即可，如果在其他服务器，则要使用绝对路径。示例代码如下：
<form action="form_action.asp" method="get">
<p>First name: <input type="text" name="fname" /></p>
<p>Last name: <input type="text" name="lname" /></p>
<input type="submit" value="Submit" />
</form>这段代码中的"form_action.asp"程序和这个表单页面在一个文件夹中，故直接写名称即可调用。
发送邮件
action属性除了调用程序外，也可以发送邮件，示例代码如下：
<form action="MAILTO:someone@w3school.com.cn" 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>这段代码中。发送邮件的写法是这样的：action="MAILTO:someone@w3school.com.cn"，通过MAILTO:告诉浏览器，这里要发送邮件！然后输入相应的邮箱地址，这样就会把表单中的信息以邮件的形式发送到相应的邮箱中了。
大家可以把邮箱地址改成自己的邮箱试一下，浏览器会让大家选择发送邮件的程序。如图所示：
使用这个功能我们可以写一个简单的邮件发送页面，示例代码如下：
<form action="mailto:yourname@domain.com" method="post" enctype="text/plain">
主题：<input name="subject" type="text"><br>
抄送：<input name="cc" type="text"><br>
密送：<input name="bcc" type="text"><br>
正文：<textarea name="body"></textarea><br>
<input type="submit">
</form>这样的写法大家可能会发现问题，即如果一个网站注册用户超过100人以后，靠这种手动输入用户邮箱的方法发送邮件简直就是折磨人啊！
实际上，在网站中，我们会把会员或注册用户的邮箱存在数据库中，通过调用数据库中的用户邮箱的程序语句来替换action中的具体邮箱地址即可，再通过程序，可以针对全部用户或部分用户进行群发信息。
其中，enctype属性是向服务器声明上传信息的形式，也就是向服务器说明发送的数据到底是数字还是英文还是中文还是编程语句。专业一些的说法是"规定在发送表单数据之前如何对其进行编码。"
全部属性值有三个，如图所示，大家可以简要理解一下。
除此之外，我们还发现一个属性叫做method（方法），通过上面的示例代码可知，method属性有两个属性值，一个是get一个是post，这是什么意思呢？
信息上传的两种方法
<form>中的method标签即为表单信息指定相应的发送方法。
方法有两种，一种叫get，这种方法通常用来发送简短的且低安全要求的信息，特点是速度比较快。
post经常用来发送体积较大的信息，如果发送一些对安全性要求高的信息，html的官方说明中建议使用post方法。
我个人认为，现阶段大家能记住这两个方法的主要特点即可。这一篇的内容实际上也是前端学习者对服务器端的运行的了解内容。
下面为大家附上更为专业的讲解，看不懂也没关系，尽量读，至少能被专业词汇洗礼一下!
method 属性
浏览器使用 method 属性设置的方法将表单中的数据传送给服务器进行处理。共有两种方法：POST 方法和 GET 方法。
如果采用 POST 方法，浏览器将会按照下面两步来发送数据。首先，浏览器将与 action 属性中指定的表单处理服务器建立联系，一旦建立连接之后，浏览器就会按分段传输的方法将数据发送给服务器。
在服务器端，一旦 POST 样式的应用程序开始执行时，就应该从一个标志位置读取参数，而一旦读到参数，在应用程序能够使用这些表单值以前，必须对这些参数进行解码。用户特定的服务器会明确指定应用程序应该如何接受这些参数。
另一种情况是采用 GET 方法，这时浏览器会与表单处理服务器建立连接，然后直接在一个传输步骤中发送所有的表单数据：浏览器会将数据直接附在表单的 action URL 之后。这两者之间用问号进行分隔。
一般浏览器通过上述任何一种方法都可以传输表单信息，而有些服务器只接受其中一种方法提供的数据。可以在 <form> 标签的 method （方法）属性中指明表单处理服务器要用方法来处理数据，使 POST 还是 GET。
POST 还是 GET？
如果表单处理服务器既支持 POST 方法又支持 GET 方法，那么你该选择哪种方法呢？下面是有关这方面的一些规律：
如果希望获得最佳表单传输性能，可以采用 GET 方法发送只有少数简短字段的小表单。
一些服务器操作系统在处理可以立即传递给应用程序的命令行参数时，会限制其数目和长度，在这种情况下，对那些有许多字段或是很长的文本域的表单来说，就应该采用 POST 方法来发送。
如果你在编写服务器端的表单处理应用程序方面经验不足，应该选择 GET 方法。如果采用 POST 方法，就要在读取和解码方法做些额外的工作，也许这并不很难，但是也许你不太愿意去处理这些问题。
如果安全性是个问题，那么我们建议选用 POST 方法。GET 方法将表单参数直接放在应用程序的 URL 中，这样网络窥探者可以很轻松地捕获它们，还可以从服务器的日志文件中进行摘录。如果参数中包含了信用卡帐号这样的敏感信息，就会在不知不觉中危及用户的安全。而 POST 应用程序就没有安全方面的漏洞，在将参数作为单独的事务传输给服务器进行处理时，至少还可以采用加密的方法。
如果想在表单之外调用服务器端的应用程序，而且包括向其传递参数的过程，就要采用 GET 方法，因为该方法允许把表单这样的参数包括进来作为 URL 的一部分。而另一方面，使用 POST 样式的应用程序却希望在 URL 后还能有一个来自浏览器额外的传输过程，其中传输的内容不能作为传统 <a> 标签的内容。
以上内容来自W3school
今天的内容结束了，这一篇内容实践的东西比较少，主要是阅读与了解。
至此，HTML表单部分的讲解就算告于段落了，如果您有任何疑问请给我留言，如有问题或错误请予以斧正！
如果您喜欢我的教程请关注我，点赞也能让我充满动力！
HTML序章（学习目的、对象、基本概念）——零基础自学网页制作
HTML是什么？——零基础自学网页制作
第一个HTML页面如何写？——零基础自学网页制作
HTML页面中head标签有啥用？——零基础自学网页制作
初识meta标签与SEO——零基础自学网页制作
HTML中的元素使用方法1——零基础自学网页制作
HTML中的元素使用方法2——零基础自学网页制作
HTML元素中的属性1——零基础自学网页制作
HTML元素中的属性2（路径详解）——零基础自学网页制作
使用HTML添加表格1（基本元素）——零基础自学网页制作
使用HTML添加表格2（表格头部与脚部）——零基础自学网页制作
使用HTML添加表格3（间距与颜色）——零基础自学网页制作
使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作
16进制颜色表示与RGB色彩模型——零基础自学网页制作
HTML中的块级元素与内联元素——零基础自学网页制作
初识HTML中的<div>块元素——零基础自学网页制作
在HTML页面中嵌入其他页面的方法——零基础自学网页制作
封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作
HTML表单元素初识1——零基础自学网页制作
HTML表单元素初识2——零基础自学网页制作
HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作
HTML表单4（form的action、method属性）——零基础自学网页制作
HTML列表制作讲解——零基础自学网页制作
为HTML页面添加视频、音频的方法——零基础自学网页制作
音视频格式转换神器与html视频元素加字幕——零基础自学网页制作
HTML中使用<a>标签实现文本内链接——零基础自学网页制作
*请认真填写需求信息，我们会在24小时内与您取得联系。
