【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>&lt;form&gt;</code></td>
    <td>用于创建表单，收集用户输入的数据</td>
    <td><div><span>用户信息表格</span></div></td>
  </tr>
  <tr>
    <td><code>&lt;input&gt;</code></td>
    <td>用于收集用户输入的数据</td>
    <td><input type="text" placeholder="文本输入"></td>
  </tr>
  <tr>
    <td><code>&lt;label&gt;</code></td>
    <td>与表单控件关联的标签，提供表单控件的标题</td>
    <td><label for="name">姓名:</label></td>
  </tr>
  <tr>
    <td><code>&lt;textarea&gt;</code></td>
    <td>用于输入多行文本</td>
    <td><textarea rows="4" cols="50"></textarea></td>
  </tr>
  <tr>
    <td><code>&lt;select&gt;</code></td>
    <td>用于创建下拉选择菜单</td>
    <td><select><option>选项1</option><option>选项2</option></select></td>
  </tr>
  <tr>
    <td><code>&lt;button&gt;</code></td>
    <td>用于创建按钮</td>
    <td><button>点击我</button></td>
  </tr>
  <tr>
    <td><code>&lt;fieldset&gt;</code></td>
    <td>用于将页面上的一组相关元素分组</td>
    <td><fieldset><legend>用户信息</legend></fieldset></td>
  </tr>
  <tr>
    <td><code>&lt;legend&gt;</code></td>
    <td>为fieldset元素提供标题</td>
    <td><legend>用户信息</legend></td>
  </tr>
  <tr>
    <td><code>&lt;div&gt;</code></td>
    <td>用于将页面上的内容分组</td>
    <td><div>这是一个div元素</div></td>
  </tr>
  <tr>
    <td><code>&lt;span&gt;</code></td>
    <td>用于对文档中的文本进行分组</td>
    <td><span>这是一个span元素</span></td>
  </tr>
  <tr>
    <td><code>&lt;script&gt;</code></td>
    <td>用于嵌入或引用脚本，通常是JavaScript</td>
    <td><script>console.log('这是一个脚本');</script></td>
  </tr>
  <tr>
    <td><code>&lt;style&gt;</code></td>
    <td>用于定义HTML文档中元素的内联样式</td>
    <td><style>body { background-color: #f0f0f0; }</style></td>
  </tr>
</table>

</body>
</html>