整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
页编程之表单详解。
同学们好，今天我要跟大家分享的是html中前后台数据交互的重要内容——form标签。通过form标签，用户可以在前台填写资料，然后通过form的method属性中设置的提交方式，提交至action属性规定的后端处理程序中进行处理。
我们经常在网页上看到的填写、注册、登录、修改资料等操作都需要使用form标签。让我们来看看今天的实例效果吧。
form标签对于用户来说是不可见的，如果没有这一句话，你们只能看到一个完全空白的网页。
可以将form标签想象成一个盒子，其中放置了输入框、单选框、复选框等控件。当用户填写完所有控件的内容并点击提交按钮时，这个盒子就会被盖上，并被直接发送到服务器进行处理。
接下来，我们来看看实现代码。form标签是一个围堵标签，它具有许多属性，但并非所有属性都是必需的。因此，根据需要设置相应的属性即可。
首先，我要重点介绍几个常用的属性：action、name、method。
action属性设置了服务端处理程序的URL地址。以邮寄盒子的理解来说，action就是收件人地址。
name属性设置了表单的名称，这个名称可以被前台的JS调用。同时，在一个网页中存在多个表单标签时，它也可以用来给服务器进行区分。
method属性设置了表单的提交方式，它有两个值post和get。post是密文，而get是明文，post没有数据长度限制，而get只能传递大约3000个字符。
以邮寄举例，get是直接将写着内容的信纸寄出，而post则是将信纸装进信封里寄出。enctype不是常用属性，但在使用时非常重要。它规定了从表单数据发送到服务器之前如何对其进行编码，共有三个值，分别对应文字数据、多媒体数据和文件数据。详情请参考汇总文档。值得一提的是，只有在method等于post时，enctype的值才会生效。
除了这三个属性外，还有accept-charset、autocomplete和history。accept-charset声明了服务端可以处理的字符集，autocomplete是否开启前台自动填充历史数据及用户填写一次之后，再填写会在浏览器中询问是否根据过往填写的内容进行自动填充。
·将logo的"novalidate"设置为"true"，可以直接提交未经验证的表单数据。通常，我们需要在前台使用JS或控件验证用户填写的数据是否符合格式要求。然而，这个属性可以直接绕过验证。
·将"target"设置为"_blank"，可以打开新的窗口进行提交。这与a标签的"target"属性相同。现在，我的理解是这样的。在后面的C#章节中，我们将结合具体的使用场景进行详细的讲解。
今天的分享就到这里。希望各位同学能按照我的要求，认真练习写三次。这样，即使不看视频，你们也能写出正确的代码。所有的案例和相关文档都可以向我索取。我们下期再见。网页编程、服务端编程、数据库和算法。如果你想学习编程，记得关注我哦！
这里是云端源想IT，帮你轻松学IT”
嗨~ 今天的你过得还好吗？
世界微尘里
吾宁爱与憎
- 2024.03.18 -
在互联网的世界中，表单是用户与网站进行互动的重要桥梁。无论是注册新账号、提交反馈、还是在线购物，表单都扮演着至关重要的角色。在网页中，我们需要跟用户进行交互，收集用户资料，此时就需要用到表单标签。
HTML提供了一系列的表单标签，使得开发者能够轻松地创建出功能丰富的表单。今天我们就来深入探讨这些标签，了解它们的作用以及如何使用它们来构建一个有效的用户界面。
在HTML中，一个完整的表单通常由表单域、表单控件（表单元素）和提示信息三个部分构成。
表单域
表单控件
这些是用户与表单交云的各种元素，如<input>（用于创建不同类型的输入字段）、<textarea>（用于多行文本输入）、<button>（用于提交表单或执行其他操作）、<select>和<option>（用于创建下拉列表）等。
提示信息
这些信息通常通过<label>标签提供，它为表单控件提供了描述性文本，有助于提高可访问性。<label>标签通常与<input>标签一起使用，并且可以通过for属性与<input>标签的id属性关联起来。
这三个部分共同构成了一个完整的HTML表单，使得用户可以输入数据，并通过点击提交按钮将这些数据发送到Web服务器进行处理。
在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件。下面就来介绍HTML中常用的表单元素。
1、<form>标签：基础容器
作用：定义一个表单区域，用户可以在其中输入数据进行提交。
<form action="submit.php" method="post">其中action属性指定了数据提交到的服务器端脚本地址，method属性定义了数据提交的方式（通常为GET或POST）。
2、<input>标签：数据输入
<input>标签是一个单标签，用于收集用户信息。允许用户输入文本、数字、密码等。
<input type="text" name="username" placeholder="请输入用户名">type属性决定了输入类型，name属性定义了数据的键名，placeholder属性提供了输入框内的提示文本。
<input>标签的属性
下面举个例子来说明：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
用户名：<input type="text" value="请输入用户名"><br>
密码：<input type="password"><br>
性别：男<input type="radio" name="sex" checked="checked"> 女<input type="radio" name="sex"><br>
爱好：吃饭<input type="checkbox"> 睡觉<input type="checkbox"> 打豆豆<input type="checkbox"><br>
<input type="submit" value="免费注册">
<input type="reset" value="重新填写">
<input type="button" value="获取短信验证码"><br>
上传头像：<input type="file">
</form>
</body>
</html>3、<label>标签：关联说明
它与输入字段如文本框、单选按钮、复选框等关联起来，以改善网页的可用性和可访问性。<label>标签有两种常见的用法：
1）包裹方式：
在这种用法中，<label>标签直接包裹住关联的表单元素。例如：
<label>用户名：<input type="text" name="username"></label>这样做的好处是用户点击标签文本时，关联的输入字段会自动获取焦点，从而提供更好的用户体验。
2）使用for属性关联：
在这种用法中，<label>标签通过for属性与目标表单元素建立关联，for属性的值应与目标元素的id属性相匹配。例如：
<label for="username">用户名：</label><input type="text" id="username" name="username">这样做的优势是单击标签时，相关的表单元素会自动选中（获取焦点），从而提高可用性和可访问性。
4、<select>和<option>标签：下拉选择
在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用标签控件定义下拉列表。
注意点：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
籍贯：
<select>
<option>山东</option>
<option>北京</option>
<option>西安</option>
<option selected="selected">火星</option>
</select>
</form>
</body>
</html>5、<textarea>标签：多行文本输入
当用户输入内容较多的情况下，我们可以用表单元素标签替代文本框标签。
<textarea name="message" rows="5" cols="30">默认文本</textarea>rows和cols属性分别定义了文本区域的行数和列数。
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
今日反馈：
<textarea>请在此输入内容</textarea>
</form>
</body>
</html>6、<button>标签：按钮控件
创建一个可点击的按钮，通常用于提交或重置表单。它允许用户放置文本或其他内联元素（如<i>、<b>、<strong>、<br>、<img>等），这使得它比普通的<input type="button">具有更丰富的内容和更强的功能。
<button type="submit">提交</button>type属性为submit时表示这是一个提交按钮。
7、<fieldset>和<legend>标签：分组和标题
通常用于在HTML表单中对相关元素进行分组，并提供一个标题来描述这个组的内容。
<fieldset>标签：该标签用于在表单中创建一组相关的表单控件。它可以将表单元素逻辑分组，并且通常在视觉上通过围绕这些元素绘制一个边框来区分不同的组。这种分组有助于提高表单的可读性和易用性。
<legend>标签：它总是与<fieldset>标签一起使用。<legend>标签定义了<fieldset>元素的标题，这个标题通常会出现在浏览器渲染的字段集的边框上方。<legend>标签使得用户更容易理解每个分组的目的和内容。
代码示例：
<form>
<fieldset>
<legend>个人信息</legend>
<label for="name">姓名：</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">邮箱：</label>
<input type="email" id="email" name="email"><br><br>
</fieldset>
<fieldset>
<legend>兴趣爱好</legend>
<input type="checkbox" id="hobby1" name="hobby1" value="music">
<label for="hobby1">音乐</label><br>
<input type="checkbox" id="hobby2" name="hobby2" value="sports">
<label for="hobby2">运动</label><br>
<input type="checkbox" id="hobby3" name="hobby3" value="reading">
<label for="hobby3">阅读</label><br>
</fieldset>
<input type="submit" value="提交">
</form>在这个示例中，我们使用了两个<fieldset>元素来组织表单的不同部分。第一个<fieldset>包含姓名和邮箱字段，而第二个<fieldset>包含三个复选框，用于选择用户的兴趣爱好。每个<fieldset>都有一个<legend>元素，用于提供标题。这样，用户在填写表单时可以更清晰地了解每个部分的内容。
想要快速入门前端开发吗？推荐一个前端开发基础课程，这个老师讲的特别好，零基础学习无压力，知识点结合代码，边学边练，可以免费试看试学，还有各种辅助工具和资料，非常适合新手！点这里前往学习哦！云端源想
8、<datalist>标签：预定义选项列表
<datalist>标签是HTML5中引入的一个新元素，它允许开发者为输入字段提供预定义的选项列表。当用户在输入字段中输入时，浏览器会显示一个下拉菜单，其中包含与用户输入匹配的预定义选项。
使用<datalist>标签可以提供更好的用户体验，因为它可以帮助用户选择正确的选项，而不必手动输入整个选项。此外，<datalist>还可以与<input>元素的list属性结合使用，以将预定义的选项列表与特定的输入字段关联起来。
下面是一个使用<datalist>标签的代码示例：
<form>
<label for="color">选择你喜欢的颜色：</label>
<input type="text" id="color" name="color" list="colorOptions">
<datalist id="colorOptions">
<option value="红色">
<option value="蓝色">
<option value="绿色">
<option value="黄色">
<option value="紫色">
</datalist>
<input type="submit" value="提交">
</form>9、<output>标签：计算结果输出
<output>标签是HTML5中引入的一个新元素，它用于显示计算结果或输出。该标签通常与JavaScript代码结合使用，通过将计算结果赋值给<output>元素的value属性来显示结果。
<output>标签可以用于各种类型的计算和输出，例如数学运算、字符串处理、数组操作等。它可以与<input>元素一起使用，以实时更新计算结果。
下面是一个使用<output>标签的示例：
<form>
<label for="num1">数字1：</label>
<input type="number" id="num1" name="num1" oninput="calculate()"><br><br>
<label for="num2">数字2：</label>
<input type="number" id="num2" name="num2" oninput="calculate()"><br><br>
<label for="result">结果：</label>
<output id="result"></output>
</form>
<script>
function calculate() {
var num1 = parseInt(document.getElementById("num1").value);
var num2 = parseInt(document.getElementById("num2").value);
var result = num1 + num2;
document.getElementById("result").value = result;
}
</script>10、<progress>标签：任务进度展示
<progress>标签是HTML5中用于表示任务完成进度的一个新元素。它通过value属性和max属性来表示进度，其中value表示当前完成的值，而max定义任务的总量或最大值。
示例：
<!DOCTYPE html>
<html>
<head>
<title>Progress Example</title>
</head>
<body>
<h1>File Download</h1>
<progress id="fileDownload" value="0" max="100"></progress>
<br>
<button onclick="startDownload()">Start Download</button>
<script>
function startDownload() {
var progress = document.getElementById("fileDownload");
for (var i = 0; i <= 100; i++) {
setTimeout(function() {
progress.value = i;
}, i * 10);
}
}
</script>
</body>
</html>在上面的示例中，我们创建了一个名为"fileDownload"的<progress>元素，并设置了初始值为0，最大值为100。我们还添加了一个按钮，当用户点击该按钮时，会触发名为"startDownload"的JavaScript函数。这个函数模拟了一个文件下载过程，通过循环逐步增加<progress>元素的value属性值，从而显示下载进度。
11、<meter>标签：度量衡指示器
<meter>标签在HTML中用于表示度量衡指示器，它定义了一个已知范围内的标量测量值或分数值，通常用于显示磁盘使用情况、查询结果的相关性等。例如：
<p>CPU 使用率： <meter value="0.6" min="0" max="1"></meter> 60%</p>
<p>内存使用率： <meter value="0.4" min="0" max="1"></meter> 40%</p>在这个示例中，我们使用了两个<meter>标签来分别显示CPU和内存的使用率。value属性表示当前的测量值，min和max属性分别定义了测量范围的最小值和最大值。通过这些属性，<meter>标签能够清晰地显示出资源的使用情况。
需要注意的是，<meter>标签不应该用来表示进度条，对于进度条的表示，应该使用<progress>标签。
12、<details>和<summary>标签：详细信息展示
<details>和<summary>标签是HTML5中新增的两个元素，用于创建可折叠的详细信息区域。
<details>标签定义了一个可以展开或折叠的容器，其中包含一些额外的信息。它通常与<summary>标签一起使用，<summary>标签定义了<details>元素的标题，当用户点击该标题时，<details>元素的内容会展开或折叠。
示例：
<details>
<summary>点击查看详细信息</summary>
<p>这里是一些额外的信息，用户可以点击标题来展开或折叠这些信息。</p>
</details>在这个示例中，我们使用了<details>标签来创建一个可折叠的容器，并在其中添加了一个<summary>标签作为标题。当用户点击这个标题时，容器的内容会展开或折叠。
总结：
HTML表单标签是构建动态网页的基石，它们使得用户能够与网站进行有效的交互。
通过合理地使用这些标签，开发者可以创建出既美观又功能强大的表单，从而提升用户体验和网站的可用性。所以说，掌握这些标签的使用，对于前端开发者来说是至关重要的。
我们下期再见！
END
文案编辑|云端学长
文案配图|云端学长
内容由：云端源想分享
表单的信息发送与处理过程可以简单的进行图示，如下图。
以注册会员为例，用户在自己的电脑上打开相应的注册表单页面填写信息，完成填写后点击提交按钮，也就是图中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小时内与您取得联系。
