【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>