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

我不是女神ヾ 2022-10-10 02:08 280阅读 0赞

说明：以下内容是基于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的输入框，而不必点击该输入框。

请输入密码

![8be2d15c4967][]

for=id示例

2、标签

this is a example

![8be2d15c4967][]

文本框中的值为value值

3、标签

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

上海

北京

天津

![8be2d15c4967][]

secect注意事项

[8be2d15c4967]: /images/20221005/9efe12108bac44bdb0f71b05956e15bc.png

发表评论取消回复

表情：

评论列表（有 0 条评论，280人围观）

还没有评论，来说两句吧...

相关阅读

相关 html-表单的元素

表单的元素 <!-- 属性描述 accept-charset 规定在被提交表单中使用的字符集（默认：页面字符集）。 action 规定向

你的名字/ 2023年02月20日 12:27/ 0 赞/ 7 阅读

相关 HTML表单元素

HTML表单元素 HTML中的表单元素，可以说是整个HTML中最常用也是最重要的部分，里面包含的太多的元素，尔每一个元素中的type类型又有很多种。所以需要大家理清楚区分

向右看齐/ 2022年12月20日 11:09/ 0 赞/ 225 阅读

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

说明：以下内容是基于w3school及饥人谷教学内容，对HTML表单元素做的简单说明。元素元素定义 HTML 表单区间，而这个区间的数据将会被提交给后台。例子：请

我不是女神ヾ/ 2022年10月10日 02:08/ 0 赞/ 281 阅读

相关 html元素 —— 表单元素及实用属性

一、常用表单元素 <form>:定义供用户输入的表单。 <fieldset>:定义域。即输入区加有文字的边框。 <legend>：定义域的标题，即边框上的文字。 <la

红太狼/ 2022年09月25日 12:25/ 0 赞/ 266 阅读

相关 HTML5表单元素

表单元素总汇 input 表示用来收集用户输入数据的控件 textarea 表示可以输入多行文本的控件 select 表示用来提供一组固定的选项

阳光穿透心脏的1/2处/ 2022年09月24日 13:15/ 0 赞/ 283 阅读

相关 HTML5表单元素

新的表单元素：`<datalist> <keygen> <output>` 1.datalist元素规定输入域的选项列表，datalist属性规定form或input

叁歲伎倆/ 2022年09月21日 01:28/ 0 赞/ 277 阅读

相关 HTML中的表单元素

直接给个例子吧，这样比较直观： <form action="http://www.baidu.com" method="get"> 单行文本框：<in

快来打我*/ 2022年08月23日 03:44/ 0 赞/ 296 阅读

相关 HTML5 表单元素 —— input元素

<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf8"

ゝ一世哀愁。/ 2022年07月11日 17:26/ 0 赞/ 782 阅读

相关 HTML5表单元素

一、表单控件 1.<form>元素用于生成表单，属性如下 1. action指定表单的发送地址（服务器地址） 2. method是表单数据发送至服务

深藏阁楼爱情的钟/ 2022年05月19日 22:22/ 0 赞/ 413 阅读

相关 HTML元素标签、表单元素详解

<html lang="en"> <head> <meta charset="UTF-8"> <title>网页的标题</title> </he

末蓝、/ 2022年04月18日 03:13/ 0 赞/ 581 阅读