HTML5基础——5、表单

原创已于 2025-10-18 07:52:56 修改 · 1.2k 阅读

30 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #前端 #html #表单

于 2025-10-15 10:00:00 首次发布

H5 专栏收录该内容

46 篇文章

订阅专栏

大家好，我是阿赵。继续学习H5，这次来看看网页里面经常出现的表单。

一、小例子

先看看这个小例子的代码：

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <form action="www.baidu.com" method="get" name="form1">
    <div>
      登记表
    </div>
    <div>
      <label for="username">姓名</label>
      <input type="text" name="username" value="阿赵" id="username">
    </div>
    <div>
      <span>年龄</span>
      <input type="text" name="age" value="18">
    </div>
    <div>
      <span>密码</span>
      <input type="password" name="password" value="<PASSWORD>">
    </div>
    <div>
      <span>性别</span>
      <input type="radio" name="sex" value="男" checked>男
      <input type="radio" name="sex" value="女">女
    </div>
    <div>
      <span>爱好</span>
      <input type="checkbox" name="hobby" value="篮球" checked>篮球
      <input type="checkbox" name="hobby" value="足球">足球
      <input type="checkbox" name="hobby" value="羽毛球">羽毛球
    </div>
    <div>
      <span>学历</span>
      <select name="education">
        <option value="本科">本科</option>
        <option value="专科">专科</option>
        <option value="高中">高中</option>
      </select>
    </div>

    <div>自我介绍</div>
    <div>
      <textarea name="introduce" cols="30" rows="10"></textarea>
    </div>
    <div>
      简历上传
      <input type="file" name="file">
    </div>
    <input type="submit" value="提交">
    <input type="reset" value="重置">

  </form>
</body>

</html>

运行的效果：
在这里插入图片描述

这是一个很常见的网页收集资料的表单效果。
很明显，表单的作用就是让用户数据资料，然后发送到指定的地方进行数据收集。

二、用法说明

1、表单标签和表单域

从上面的例子很明显可以看出，一个表单是通过标签来指定的，比如上面的例子：

 <form action="www.baidu.com" method="get" name="form1">

其中这个表单有几个属性：

1. action

这个其实就是表单填写完之后，需要往什么地方发送。我这里随便写个百度的网址只是为了说明而已。

2. method

表达发送数据时，使用那种方式。发送方式有get和post两种。

3. name

name字段是表单的名字。

2、表单元素

在上面的例子里面，出现了一些之前就介绍过的标签，比如div或者span。然后还有一些之前没有介绍过的标签，主要就是input标签，这就是表单输入里面的表单元素了。

1. text

<input type="text" name="username" value="阿赵">

这是文本输入框，效果如下：
在这里插入图片描述

可以通过value来指定默认值

2. password

<input type="password" name="password" value="<PASSWORD>">

密码输入框，效果如下：
在这里插入图片描述

密码的特点就是不能直接看到字符，而是显示了遮盖的字符。

3. radio

  <input type="radio" name="sex" value="男" checked>男
  <input type="radio" name="sex" value="女">女

单选框输入，效果如下：
在这里插入图片描述

虽然有多个选项，但只能选择其中一个。为了让多个选项起到关联的效果，多个 radio之间，需要使用相同的name。想默认选择某一个，可以添加checked的属性。

4. checkbox

  <input type="checkbox" name="hobby" value="篮球" checked>篮球
  <input type="checkbox" name="hobby" value="足球">足球
  <input type="checkbox" name="hobby" value="羽毛球">羽毛球

多选输入，效果如下：
在这里插入图片描述

有多个选择，可以选择多个。为了让多个选项关联，需要使用相同的name。想默认选择，可以添加checked属性

5. select

  <select name="education">
    <option value="本科">本科</option>
    <option value="专科">专科</option>
    <option value="高中">高中</option>
  </select>

下拉选择框，效果如下：
在这里插入图片描述

在多个选择项里面选择一个。

6. textarea

多行文本输入框，效果如下：
在这里插入图片描述

可以通过cols和rows来指定行列数。

7. submit

提交按钮，效果如下： ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/4b07b6d2e7c640b5bb4d6c941ce7ca1c.png#pic_center)

需要记起最开始说的，表单的作用是收集用户数据并且发送到指定的地址。所以在填完表单之后，需要一个提交的按钮。点击按钮之后，数据就会通过form标签指定的action和method来发送。

8. reset

相对于提交按钮，这个是重置按钮，效果如下： ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/6eae071b69bb48fcaa505382f9270518.png#pic_center)

当点击重置按钮，form里面的所有表单元素会回复默认值。

9. label

  <label for="username">姓名</label>
  <input type="text" name="username" value="阿赵" id="username">

这里label的作用是和输入框焦点绑定，效果如下：
在这里插入图片描述

当我点击“姓名”的文字时，输入的焦点就会转移到username的输入框里面。
为了得到这个效果，在username的输入框里面需要指定一个id字段，然后label标签里面要指定for属性的值为输入框id。

10. file

<input type="file" name="file">

文件上传的选择按钮，效果如下
在这里插入图片描述

当点击按钮，会自动出现文件选择窗口：
在这里插入图片描述

选择完成之后，会出现已经选择的文件名
在这里插入图片描述

在这里插入图片描述