2023蓝桥杯备赛 表单标签

Qi_Xtreme
146 阅读3分钟

表单标签

form标签

在 HTML 文档中，使用 form 标签来进行表单提交。form 标签有两个重要的属性，action 和 method 属性，其中 action 的属性值是表单提交的地址，method 的属性值是提交的方法。

其基本语法为：

<form action="表单提交地址" method="提交方法"></form>

method 属性规定了表单提交方式，最常用的有两种方式，分别是 GET 和 POST。其中 GET 是把表单中的参数放置在 HTTP 请求的头部发送给服务器，而 POST 是将请求参数置于请求体内发送。

input标签

input 标签表示表单，其中它有不同的属性，用于表示不同的表单类型。

这里给大家介绍是四种类型的表单：

  • 文本类表单
  • 选择类表单
  • 文件上传类表单
  • 按钮表单

文本类表单元素

以文本框为代表的表单元素称之为文本类元素。

其基本使用格式为：

<input type="text" />

例如，填写用户名的输入框就适合用文本类型的输入框。

新建一个 index.html 文件，在其中写入以下内容：

<!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>用户名：<input type="text" /></form>
  </body>
</html>

点击预览页面，效果如下：

图片描述

选择类表单元素

选择类表单元素是指单选框和复选框。

  • 单选框就是给出多个选项只能选择其中一个。
  • 复选框就是给出多个选项可以选择多个。

单选框和复选框的使用格式如下所示：

<!--单选框-->
<input type="radio" name="选项名" value="提交值" />
<!--复选框-->
<input type="checkbox" name="选项名" value="提交值" />

注意：使用单选框时，每个选项一定要设置相同的 name 值，否则就没有单选的效果。

例如，选择性别的输入框就适合用单选框，选择兴趣爱好的输入框就适合用复选框。

新建一个 index1.html 文件，在其中写入以下内容：

<!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>
      性别：<input type="radio" name="sex" value="male" />男
      <input type="radio" name="sex" value="female" />女 <br />
      爱好：<input type="checkbox" name="hobby" value="basketball" />篮球
      <input type="checkbox" name="hobby" value="football" />足球<br />
      <input type="reset" />
    </form>
  </body>
</html>

image.png

对于 radio 类型元素来说，若 name 属性的取值相同，可以实现单选的效果，但 checkbox 不会因为 name 属性的取值相同变成单选。

上面代码中的 type="reset" 是重置按钮，可以把表单中已填写的信息给清除掉。

文件和发送类型表单

想象一个场景，当我们填写一个电子简历需要上传附件文件到表单上，那么我们需要一个「上传文件」的按钮，选择目标文件后，点击「上传」按钮，上传到页面上。

图片描述

图标来自 Icons8。

在 HTML 中，我们使用 type="file" 表示文件类型表单元素，其使用格式为：

<input type="file" name="表单名字" accept="上传文件的格式" />

在 HTML 中，我们使用 type="submit" 表示发送类型表单元素，其使用格式为：

<input type="submit" name="表单名字" value="表单名" />

接下来我们做一做练习吧！

新建一个 index2.html 文件，在其中写入以下内容：

<!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>
      <p><input type="file" name="img" accept="image/gif, image/jpg" /></p>
      <p><input type="submit" name="upload" value="上传" /></p>
    </form>
  </body>
</html>

点击预览页面，效果如下：

图片描述

在上面代码中，我们只允许上传 image 或者 gif 类型的文件，如果选择其他类型的文件，我们从上图可以看出窗口的「打开」按钮是灰色的。

下拉列表

下拉列表就是一个鼠标放在目标框中，会出现多种选择的列表。例如：

图片描述

在 HTML 中，通过 select 和 option 标签可以实现下拉列表框，select 标签用于显示可供用户选择的下拉列表，其中的每个选项都由 option 标签标识。

其语法格式为：

<select>
  <option>选项一</option>
  <option>选项二</option>
  <option>选项三</option>
</select>

select 有两个常用属性，如下所示：

属性描述
multiple设置下拉列表可以选择多项。
size设置下拉列表选择几个表项。

option 有两个常用属性，如下所示：

属性描述
selected设置是否被选中。
value设置列表项的默认值。

了解了下拉列表，接下来我们做一做练习吧！

新建一个 index3.html 文件，页面上有一个「就业信息」的填写清单，代码如下。

<!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>
    <h3>请提交就业相关信息</h3>
    <form>
      <p>
        学历：
        <select name="edu">
          <option value="0">初中</option>
          <option value="1">高中</option>
          <option value="2">大专</option>
          <option value="3" selected="selected">本科</option>
          <option value="4">硕士</option>
          <option value="5">博士</option>
          <option value="6">其他</option>
        </select>
        就业城市：
        <select name="city" multiple="multiple">
          <option value="A" selected="selected">北京</option>
          <option value="B">上海</option>
          <option value="C">深圳</option>
          <option value="D">广州</option>
          <option value="E">其他</option>
        </select>
      </p>
      <p><input type="submit" name="submit" value="提交" /></p>
    </form>
  </body>
</html>

点击预览页面，效果如下：

图片描述

avatar
文章
阅读
粉丝