网页设计基础 第四讲：表单设计不再难：HTML表单控件详解与实操

TechLearn
2,333 阅读4分钟

课程简介

在前两节课中，我们已经学习了HTML的基本概念，并动手创建了我们的第一个网页。今天，我们将深入探讨一些常用的HTML控件，并通过实践来加深理解。本文详细介绍了HTML表单中的各种常用控件，包括文本框、密码框、单选按钮、复选框、下拉框、多选列表、多行文本框、文件上传、普通按钮、图像按钮、范围滑块、日期和时间选择器、电子邮件及URL输入等。通过具体的代码示例，帮助读者了解每个控件的功能和应用场景，并提供了完整的表单示例，以便快速上手实践。

文本框

文本框是最常见的输入控件之一，用户可以在其中输入文字信息。下面是一个简单的文本框示例：

<label for="username">用户名:</label>
<input type="text" id="username" name="username">

将文本显示为下标和上标

<sub> 和 <sup> 元素可以分别用来将文本显示为下标和上标。

H<sub>2</sub>0

可折叠内容

当你想在网页上包含可折叠内容时，可以使用 <details> 和 <summary> 标签。

<details> 标签创建了一个隐藏内容的容器，而 <summary> 标签提供了一个可点击的标签来切换该内容的可见性。

<details>
        <summary>点击展开</summary>
        <p>此内容可以展开或折叠。</p>
      </details>

密码框

密码框与文本框相似，但输入的文字会以星号或圆点的形式显示，以保护用户的隐私。

<label for="password">密码:</label>
<input type="password" id="password" name="password">

下拉框

下拉框允许用户从一系列选项中选择一个值。它通常用于收集用户对有限选项的选择。 可以使用 <input> 和 <select> 元素的 multiple 属性，允许用户一次选择/输入多个值。

<label for="country">国家:</label>
<select id="country" name="country">
  <option value="china">中国</option>
  <option value="usa">美国</option>
  <option value="uk">英国</option>
</select>

<input type="file" multiple />
<select multiple>
    <option value="java">Java</option>
    <option value="c">c</option>
    <option value="python">python</option>
    <option value="php">php</option>
</select>

多行文本框

当需要用户输入大量的文本时，可以使用多行文本框。这种控件允许用户输入多行文字。

<label for="message">留言:</label>
<textarea id="message" name="message" rows="4" cols="50">
</textarea>

提交按钮

最后，为了让用户提交表单中的数据，我们需要添加一个提交按钮。这个按钮通常与表单标签

配合使用。

<form action="/submit_form" method="post">
 <!-- 在这里放置上述的控件 -->
 <input type="submit" value="提交">
</form>

文件上传

文件上传控件允许用户选择本地文件进行上传。

<label for="file">上传文件:</label>
<input type="file" id="file" name="file"><br><br>

按钮

除了提交按钮外，还可以使用普通的按钮来触发JavaScript事件或其他功能。

<button type="button" onclick="alert('这是一个普通按钮')">点击我</button><br><br>

图像按钮

图像按钮可以用作提交按钮，同时也可以作为一个图片链接。

    <input type="image" src="submit.gif" alt="提交" width="48" height="48">

范围滑块（）

范围滑块允许用户选择一个数值范围内的值。

<label for="volume">音量:</label>
<input type="range" id="volume" name="volume" min="0" max="100" value="50"><br><br>

日期选择器

日期选择器可以让用户选择日期。

<label for="birthdate">出生日期:</label>
<input type="date" id="birthdate" name="birthdate"><br><br>

时间选择器

时间选择器可以让用户选择时间。

    <label for="appointment">预约时间:</label>
<input type="time" id="appointment" name="appointment"><br><br>

电子邮件输入

电子邮件输入控件可以用来验证输入是否为有效的电子邮件地址。

<label for="email">邮箱:</label>
<input type="email" id="email" name="email"><br><br>

URL 输入

URL 输入控件可以用来验证输入是否为有效的网址。

<label for="website">网站:</label>
<input type="url" id="website" name="website"><br><br>

分组表单元素

使用 <fieldset> 标签将表单中的相关元素分组，并使用 <legend> 标签与 <fieldset> 一起为 <fieldset> 标签定义标题。

 <form>
   <fieldset>
      <legend>个人信息</legend>
      <label for="firstname">名字:</label>
      <input type="text" id="firstname" name="firstname" />
      <label for="email">电子邮件:</label>
      <input type="email" id="email" name="email" />
      <label for="contact">联系方式:</label>
      <input type="text" id="contact" name="contact" />
      <input type="button" value="提交" />
   </fieldset>
</form>

完整的示例代码

image.png 现在我们将所有这些控件整合到一个完整的HTML文档中：

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>实践示例</title>
</head>
<style>
   table {
       border-collapse: collapse;
       width: 600px;
       height: 150px;
       font-family: "Courier New", Courier, monospace;
       background-color: rgb(247, 242, 242);
       border-width: 1px;
       border-style: solid;
       border-color: black;
       /* border: 1px solid black; */
   }

   th,
   td {
       border: 1px solid black;
       text-align: left;
       padding: 5px;
   }

   th {
       background-color: #4caf50;
       line-height: 20px;
       color: white;
   }

   tr:hover {
       background-color: #da0404;
   }

   .txt {
       font-size: 14px;
       width: 240px;
   }
</style>

<body>
   <form style="width: 50%" action="submit.php" method="post" id="myForm" name="myForm" enctype="multipart/form-data">
       <input type="hidden" id="stu_id" name="stu_id" value="stu_id" />
       <fieldset>
           <legend align="center">基本信息</legend>
           <label for="name">姓名：</label>
           <input type="text" class="txt" id="name" name="name" maxlength="10" minlength="2" required />
           <br />
           <label for="name">密码：</label>
           <input type="password" id="password" name="password" maxlength="10" minlength="2" />
           <br />
           <label for="email">邮箱：</label>
           <input type="email" id="email" name="email" required />
           <br />
           <label for="birthday">出生年月：</label>
           <input type="date" id="birthday" name="birthday" required />
           <br />
           <label for="gender">性别：</label>
           <input type="radio" id="male" name="gender" value="male" checked="checked" />
           <label for="male">男</label>
           <input type="radio" id="female" name="gender" value="female" required />
           <label for="female">女</label>
           <br />
           <label>来源城市：</label>
           <select id="city" name="city" required multiple>
               <option value="">--请选择--</option>
               <option value="bj">北京</option>
               <option value="sh">上海</option>
               <option value="gz" selected>广州</option>
               <option value="sz">深圳</option>
               <option value="cd">成都</option>
           </select>
           <br />
           <label for="interest">兴趣爱好：</label>
           <input type="checkbox" id="reading" name="interest[]" value="reading" />
           <label for="reading">阅读</label>
           <input type="checkbox" id="swimming" name="interest[]" value="swimming" />
           <label for="swimming">游泳</label>
           <input type="checkbox" id="hiking" name="interest[]" value="hiking" required />
           <label for="hiking">登山</label>
           <br />
           <label for="message">个人简介：</label>
           <textarea id="message" name="message" rows="5" cols="30" maxlength="200" minlength="10"></textarea>
           <br />
           <label for="photo">照片：</label>
           <input type="file" id="photo" name="photo" accept="image/*" required />
           <br />
           <label for="theme">主题风格</label>
           <input type="color" id="theme" />
           <br />

           <input type="submit" value="提交" />
           <input type="reset" value="重置" />
           <input type="button" value="取消" onclick="history.back()" />
       </fieldset>
       <fieldset>
           <legend align="right">学习经历</legend>
           <label for="school">学校：</label>
           <input type="text" id="school" name="school" required />
           <br />
           <label for="major">专业：</label>
           <input type="text" id="major" name="major" required />
           <br />
           <label for="grade">年级：</label>
           <input type="number" id="grade" name="grade" required />
           <label for="theme">学科成绩</label>
           <input type="range" id="score" name="score" min="0" max="100" step="1" value="80" required />
       </fieldset>
       <table>
           <tr>
               <th>序号</th>
               <th>课程名称</th>
               <th>课程时间</th>
               <th>课程地点</th>
               <th>课程内容</th>
               <th>操作</th>
           </tr>
           <tr>
               <td>1</td>
               <td>HTML</td>
               <td>2021-01-01</td>
               <td>北京</td>
               <td>HTML基础语法</td>
               <td><a href="#">编辑</a> | <a href="#">删除</a></td>
           </tr>
           <tr>
               <td>2</td>
               <td>MYSQL</td>
               <td>2022-01-01</td>
               <td>上海</td>
               <td>MYSQL数据库基础语法</td>
               <td><a href="#">编辑</a> | <a href="#">删除</a></td>
           </tr>
       </table>
   </form>
</body>

</html>

这个完整的表单包含了多种输入控件，可以满足大多数基本的表单需求。你可以根据实际项目的需求调整和添加更多的控件。

实验实训

image.png

avatar
文章
阅读
粉丝