天天看点

HTML表单元素概述,HTML表单元素的简单介绍

说明:以下内容是基于w3school及饥人谷教学内容,对HTML表单元素做的简单说明。

元素 元素定义 HTML 表单区间,而这个区间的数据将会被提交给后台。

例子:

请输入留言

请输入密码

结果是form标签内的数据,password才会被提交,而textarea的内容不会被提交。

元素

元素是最重要的表单元素。

元素有很多形态,根据不同的 type 属性有以下类型:

序号

类型

描述

1

text

用于文本输入的单行输入字段,默认宽度20字符。

2

password

密码输入框,密码会自动显示为 ●

3

checkbox

用于创建多选/复选框

4

radio

用于创建单选框

5

file

用于上传文件, accept属性可以限制文件上传类型。

6

hidden

这种类型的输入元素实际上是隐藏的。这个不可见的表单元素的 value 属性保存了一个要提交给 Web 服务器的任意字符串。如果想要提交并非用户直接输入的数据的话,就是用这种类型的元素。

7

button

用于创建一个按钮,显示名称为value属性的值

8

submit

用于创建一个提交按钮,显示名称为value属性的值

9

reset

当重置按钮被点击,包含它的表单中所有输入元素的值都重置为它们的默认值。默认值由 HTML value 属性或 JavaScript 的 defaultValue 属性指定。

其他标签

1、标签

label标签本身不会产生任何特殊效果,但是可以用于改进用户可用性及体验性,当设置label的for=“某个元素的id”时,点击label标签的内容,会自动focus到该标签。

如下例,当我们点击

输入密码

几个文本时,当前页面会自动focus到password的输入框,而不必点击该输入框。

请输入密码

HTML表单元素概述,HTML表单元素的简单介绍

for=id示例

2、标签

this is a example

HTML表单元素概述,HTML表单元素的简单介绍

文本框中的值为value值

3、标签

select 元素可创建单选或多选菜单,菜单选项为标签。

上海

北京

天津

HTML表单元素概述,HTML表单元素的简单介绍

secect注意事项