表单标签

33 阅读2分钟

表单标签

知识点

  • form 标签

  • input 标签

  • select 标签

  • option 标签


一、form 标签

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

其基本语法为:

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

二、input 标签

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

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

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

1.文本类表单元素

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

其基本使用格式为:

<input type="text" />

2.选择类表单元素

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

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

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

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

3.文件上传类表单(按钮类)

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

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

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

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

三、select 标签(option 标签)

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

其语法格式为:

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

select 有两个常用属性,如下所示:

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

option 有两个常用属性,如下所示:

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