【HTML】表单
一、表单中的常用标签
表单标签是web开发中不可或缺的一部分，了解并正确使用他们对于创建功能强大、用户友好的网站至关重要，所以这次我们来认识部分搭建表单中的常用标签
1.1<form>标签
定义表单的开始和结束，包含表单的action属性（指定表单数据提交的URL）和method属性（指定HTTP方法，通常是"get"或"post"）。
在HTML表单中，action属性是一个必需属性，它指定了表单数据被发送到的服务器处理脚本的URL。当用户提交表单时，浏览器会向这个URL发送一个HTTP请求，包含表单中各个输入字段的数据。（PS：可以理解为跳转路径）
action属性的值应该是一个URL，可以是相对路径、绝对路径或完整的URL。例如：
<form action="http://example.com/process_form"> <!-- 表单内容 --> </form>当用户提交表单时，浏览器会向http://example.com/process_form发送一个HTTP请求。
如果action属性没有指定，或者指定为空字符串，表单数据将被发送到当前页面URL。
例如：
<form action=""> <!-- 表单内容 --> </form>表单数据将被发送到当前页面的URL。
action属性是表单提交的关键部分，因为它决定了表单数据将被发送到哪里进行处理。
在HTML表单中，method属性指定了表单数据发送到服务器时使用的HTTP方法。method属性有两个可能的值：
① get：当使用get方法时，表单数据会附加到URL的查询字符串中，以?key1=value1&key2=value2的形式发送。这种提交方式适用于数据量较小且不需要保密的表单。
②post：当使用post方法时，表单数据会被包含在HTTP请求的请求体中，不会显示在URL中。这种提交方式适用于数据量较大、包含敏感信息或文件上传的情况。
method属性的默认值是get。
例如，以下是一个使用post方法的表单示例：<form action="process_form.php" method="post"> <!-- 表单内容 --> </form>当用户提交表单时，表单数据会被发送到process_form.php文件，并且使用post方法。
选择get还是post方法取决于表单的用途和需要提交的数据类型。get方法适用于简单的查询和搜索表单，而post方法适用于需要保密或处理大量数据的表单。
1.2<input>标签
用于创建表单的输入字段，如文本框、密码框、单选按钮、复选框、文件上传等。
以下是一些常见的 <input> 类型：
1. text：单行文本输入框。
2. password：密码输入框，输入的字符会显示为星号或其他字符。
3. email：电子邮件地址输入框，支持基本的电子邮件格式验证。
4. url：URL输入框，支持基本的URL格式验证。
5. number：数字输入框，只允许输入数字。
6. date：日期输入框，支持日期格式的输入。
7. time：时间输入框，支持时间格式的输入。
8. checkbox：复选框，用户可以选择多个选项。
9. radio：单选按钮，用户只能选择一个选项。
10. file：文件上传输入框，用户可以选择文件上传。
11. submit：提交按钮，用于提交表单。
12. reset：重置按钮，用于重置表单。
13. button：普通按钮，可以自定义按钮的文本和功能。
<input>标签的基本结构如下：
<input type="text" name="username" placeholder="请输入用户名">
我们创建一个文本输入框，用户可以在其中输入用户名。type属性指定了输入框的类型，name属性定义了表单数据的名称，placeholder属性提供了输入框的提示信息。
<input>标签还支持其他一些属性，如 value（设置默认值）、checked（设置复选框或单选按钮的默认状态）、disabled（禁用输入字段）、readonly（只读输入字段）等。
1.3<label>标签
与输入字段相关联，提供标签文本，有助于提高表单的可访问性。
它通常与 <input>标签一起使用，以提高表单的可访问性和用户体验。
<label>标签的for属性与<input>标签的id属性相关联，这样当用户点击 <label>标签时，对应的<input>控件会被选中。这有助于用户更快地聚焦到输入字段，尤其是对于屏幕阅读器用户来说，这是一个重要的辅助功能。
以下是一个使用 <label>标签的示例：
<form action="/submit-form" method="post">
<label for="username">用户名:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="登录">
</form>
<label>标签与 <input>标签的 id属性相关联，使得用户可以通过点击标签来聚焦到相应的输入字段。
<label>标签还支持for属性之外的其他属性，如 form（指定表单的id）、class、style 等，用于进一步定制标签的外观和功能。
1.4<textarea>标签
用于创建多行文本输入框。
<textarea>标签的基本结构如下：
<textarea name="comments" rows="10" cols="50">
请在此输入您的评论...
</textarea>
name属性定义了表单数据的名称，rows属性设置了文本区域的高度（以行数计），cols属性设置了文本区域的宽度（以字符数计）。<textarea>标签的内容是初始文本，用户可以在提交表单之前编辑这些文本。
<textarea>标签还支持其他一些属性，如placeholder（提供输入区域的提示信息）、disabled（禁用文本区域）、readonly（使文本区域只读）等。
1.5<select>标签
用于创建下拉菜单或列表框。
<select name="" id="" >
</select>1.6<option>标签
定义<select>标签中的下拉菜单或列表框中的选项。
<option value="">选项一</option>
<option value="">选项二</option>
<option value="">选项三</option>
<option value="">选项四</option>
<option value="">选项五</option>1.7<button>标签
用于创建按钮，可以是提交按钮、重置按钮或自定义按钮。
<button>点击我</button>
<button type="submit">提交</button>
当按钮的类型被设置为submit，这意味着它会提交表单。
<button>标签通常用于表单中，但也可以用于其他需要按钮的地方。
1.8<fieldest>标签
用于将表单中的相关元素分组，通常用于逻辑分组或视觉上的分隔。
<form action="#">
<fieldset>
<legend>个人信息：</legend>
<label for="fname">名字：</label>
<input type="text" id="fname" name="fname">
<br>
<br>
<label for="lname">姓氏：</label>
<input type="text" id="lname" name="lname">
<br>
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
</fieldset>
</form>
1.9<legend>标签
与<fieldset>标签一起使用，为分组的元素提供一个标题。
<form action="#">
<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>
<label for="phone">电话：</label>
<input type="tel" id="phone" name="phone">
</fieldset>
</form>
1.10<div>标签
用于将表单元素分组，通常用于布局和样式控制。
<div>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</div>
1.11<span>标签
用于将表单元素分组，通常用于样式控制。
<p>这是一个包含<span style="color: blue;">蓝色文本</span>的段落。</p>
<span>标签的用途非常广泛，它可以用来：
- 应用不同的样式。
- 应用JavaScript事件处理。
- 嵌入内联的脚本。
- 包含内联的XML命名空间声明。
由于<span>标签是内联元素，它通常用于在文本流中插入额外的元素，而不影响周围的文本布局。
1.12<script>标签
用于在表单中嵌入JavaScript代码，用于表单验证或处理表单提交。脚本可以内嵌在HTML文档中，也可以从外部文件加载。
内嵌脚本通常放在<head>标签内或<body>标签的底部，以便在页面加载时执行。外部脚本则通过src属性指定脚本文件的URL来加载。
内嵌脚本的示例：
<!DOCTYPE html> <html> <head> <title>示例页面</title> <script> function sayHello() { alert('Hello, World!'); } </script> </head> <body> <button onclick="sayHello()">点击我</button> </body> </html><script>标签内定义了一个名为sayHello的函数，该函数会在点击按钮时通过onclick事件触发。
外部脚本的示例：<!DOCTYPE html> <html> <head> <title>示例页面</title> </head> <body> <script src="my-script.js"></script> </body> </html><script>标签的src属性指向了一个名为my-script.js的外部JavaScript文件。这个文件会在页面加载时执行。
<script>标签通常用于实现交互性、动态内容加载、表单验证等功能。
1.13<style>标签
用于在表单中嵌入CSS样式，用于美化表单的外观。
<style>标签可以放在HTML文档的<head>部分，这样它们就会应用到整个文档中的相应元素上。
<style>
body {
background-color: lightblue;
font-family: Arial, sans-serif;
}
h1 {
color: navy;
margin-left: 20px;
}
</style>
二、实战演戏
基本表单样式：
<!DOCTYPE html>
<html>
<head>
<title>表单一</title>
</head>
<body>
<form action="/submit-form" method="post">
<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>
<label for="comments">评论:</label>
<textarea id="comments" name="comments" rows="10" cols="50">
请在此输入您的评论...
</textarea><br><br>
<input type="submit" value="提交">
</form>
</body>
</html>
结合我们上述的13个常见标签，再新建一个表单：
<!DOCTYPE html>
<html>
<head>
<title>表格二</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h2>用户信息表格</h2>
<form action="#" method="post">
<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>
<label for="message">消息:</label>
<textarea id="message" name="message"></textarea><br><br>
<label for="country">国家:</label>
<select id="country" name="country">
<option value="usa">美国</option>
<option value="canada">加拿大</option>
<option value="uk">英国</option>
</select><br><br>
<button type="submit">提交</button>
</fieldset>
</form>
<h3>表格示例</h3>
<table>
<tr>
<th>标签</th>
<th>描述</th>
<th>示例</th>
</tr>
<tr>
<td><code><form></code></td>
<td>用于创建表单，收集用户输入的数据</td>
<td><div><span>用户信息表格</span></div></td>
</tr>
<tr>
<td><code><input></code></td>
<td>用于收集用户输入的数据</td>
<td><input type="text" placeholder="文本输入"></td>
</tr>
<tr>
<td><code><label></code></td>
<td>与表单控件关联的标签，提供表单控件的标题</td>
<td><label for="name">姓名:</label></td>
</tr>
<tr>
<td><code><textarea></code></td>
<td>用于输入多行文本</td>
<td><textarea rows="4" cols="50"></textarea></td>
</tr>
<tr>
<td><code><select></code></td>
<td>用于创建下拉选择菜单</td>
<td><select><option>选项1</option><option>选项2</option></select></td>
</tr>
<tr>
<td><code><button></code></td>
<td>用于创建按钮</td>
<td><button>点击我</button></td>
</tr>
<tr>
<td><code><fieldset></code></td>
<td>用于将页面上的一组相关元素分组</td>
<td><fieldset><legend>用户信息</legend></fieldset></td>
</tr>
<tr>
<td><code><legend></code></td>
<td>为fieldset元素提供标题</td>
<td><legend>用户信息</legend></td>
</tr>
<tr>
<td><code><div></code></td>
<td>用于将页面上的内容分组</td>
<td><div>这是一个div元素</div></td>
</tr>
<tr>
<td><code><span></code></td>
<td>用于对文档中的文本进行分组</td>
<td><span>这是一个span元素</span></td>
</tr>
<tr>
<td><code><script></code></td>
<td>用于嵌入或引用脚本，通常是JavaScript</td>
<td><script>console.log('这是一个脚本');</script></td>
</tr>
<tr>
<td><code><style></code></td>
<td>用于定义HTML文档中元素的内联样式</td>
<td><style>body { background-color: #f0f0f0; }</style></td>
</tr>
</table>
</body>
</html>
