html表单元素有哪些?

html表单元素有哪些?,第1张

HTML中常用的表单元素包括:文本区域(TEXTAREA),列表框(SELECT),文本输入框(INPUT type=text),密码输入框(INPUT type=password),单选输入框(INPUT type=radio),复选输入框(INPUT type=checkbox),重置按钮、提交按钮、隐藏域、等等。

一、文本域<input type="text" name="text" value="" />

二、密码域

密码跟文本框类似,但是在里面输入的内容显示为圆点。

<input type="password" name="text" value="" />

三、单选按钮

男人:<input type="radio" name="sex" value="male" />Male<br />

女人:<input type="radio" name="sex" value="female" />Female

四、复选框

<input type="checkbox" name="check1" value="" />

五、按钮

<input type="button" value="确认" />

六、重置按钮

当点击重置按钮时,重置按钮所在的表单将全部清空,而其他表单不受影响。<input type="reset" value="重置" />

七、提交按钮

当点击提交按钮时,浏览器将自动提交表单。<input type="submit" value="提交" />

八、隐藏域

隐藏域在浏览器中并不显示,仅仅为保存一些不太重要的资料而存在。<input type="hidden" value="我是一个隐藏域" />

九、上传域<input type="file" value="" />

十、图片按钮<input type="image" src="123.gif" />

十一、下拉列表<select>

<option value="0">0</option>

<option value="1">1</option>

<option value="2">2</option>

例如:

属性:disabled,可选值:disabled ,说明:规定禁用该下拉列表。  

十二、label

abel 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。例如,当将单选按钮放在label内。则点击label内的文字也会触发单选按钮,而不必只是点中小圆点。

例如:

<label><input type="radio" name="male" />男人</label></p>

<label><input type="radio" name="male" />女人</label></p>

十三、禁用(disabled)与只读(readonly)

禁用和只读属性。readonly只针对input(text / password)和textarea有效,而disabled对于所有的表单元素都有效,包括select, radio, checkbox, button等。但是表单元素在使用了disabled后,当我们将表单以POST或GET的方式提交的话,这个元素的值不会被传递出去,而readonly会将该值传递出去。

禁用文本框:<input type="text" disabled="disabled" />

只读文本框: <input type="text" readonly="readonly" /></form>

十四、TextArea

十五、fieldset    定义域

fieldset用于给表单元素分组,legend用于设置分组标题。

表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分: 表单标签,这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。表单域,包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。表单按钮,包括提交按钮、复位按钮和一般按钮;用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作。

问题一:表单中常用的表单元素有哪些?说出它们所提供给的属性,方法,和 *** 表单的基本元素

辅助元素

问题二:html表单元素有哪些 一、文本域

二、密码域

密码跟文本框类似,但是在里面输入的内容显示为圆点。

三、单选按钮

男人: Male

女人: Female

四、复选框

五、按钮

六、重置按钮

当点击重置按钮时,重置按钮所在的表单将全部清空,而其他表单不受影响。

七、提交按钮

当点击提交按钮时,浏览器将自动提交表单。

八、隐藏域

隐藏域在浏览器中并不显示,仅仅为保存一些不太重要的资料而存在。

九、上传域

十、图片按钮

十一、下拉列表

0

1

2

属性 可选值 说明

disabled

disabled 规定禁用该下拉列表。

multiple multiple 规定可选择多个选项。

name name 规定下拉列表的名称。

size number 规定下拉列表中可见选项的数目。

十二、label

label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了......>>

问题三:html5新增的表单元素有哪些 表单结构更灵活

要提交数据的控件可以布局在form标签之外,看下面的代码,表单元素可以写到form元素之外,只需在元素中加入form=form1属性,也可提交到form元素指定的服务器地址

新增表单元素

我们以前学过的表单元素包括“text”、“button”、“file”、radio等,html5中新增加了一些表单元素,下面列出这些元素及其作用

email 类型用于验证email的格式,当提交表单时会自动验证email域的值

url 类型用于验证 URL 地址的格式,当提交表单时会自动验证url域的值

number 类型会根据你的设置提供选择数字的功能,min属性设置最小值、max属性设置最大值,value属性设置当前值,step属性设定每次增长的值,某些浏览器还不支持

range 类型用于应该包含一定范围内数字值的输入域,其会以一个滑块的形式展现,min属性设置最小值、max属性设置最大值,value属性设置当前值,如果没有设置,则其默认值的范围是1-100

日期和时间类型:HTML5 拥有多个可供选取日期和时间的新输入类型:

date - 选取日、月、年

month - 选取月、年

week - 选取周和年

time - 选取时间(小时和分钟)

datetime - 选取时间、日、月、年(UTC 时间)

datetime-local - 选取时间、日、月、年(本地时间)

search 类型用于搜索域,比如站点搜索或 Google 搜索,为其加上results=s属性,则会在搜索框前面加上一个搜索图标

tel类型用于验证输入的是否是电话格式的内容,此元素现在还没有浏览器支持

color类型会提供一个颜色拾取器,供用户选择颜色,并将用户选择的颜色填充到此元素中

案例如下,大家可以将代码拷贝或者自己编写之后,在浏览器中查看效果

主页:

邮箱:

>

问题四:Html语言表单元素的构成都包括哪些 一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮:包括提交按钮、复位按钮和一般按钮;用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作。

问题五:网页实例中常见的表单元素有哪些 10分 1、文本框

2、文本域

3、按钮

4、复选框

5、单选按钮

6、列表菜单

7、文件域

8、图像域

9、隐藏域

这些就是比较常见的,其实一般的表单构造只用到1~6,而7~9用的也不多,我在这里只给出标记的中文名称和简单的标记语法,具体的属性、用法等内容比较多,请你在百度上看一下!

问题六:常见的表单元素有哪些 表单的基本元素

辅助元素

问题七:html5中哪些是不同的新的表单元素类型 新的input的类型有

email(自动验证email格式)

url(自动验证url格式)

number(只能输入数字)

range(类似音量滑动条)

Date pickers (date, month, week, time, datetime, datetime-local)(自带日期选择)

search(搜索域,类似百度的类似搜索提示)

color(颜色选择,这个现在不兼容大部分浏览器=-=)

新标签

datalist(自动验证内容是否在可选择选项中)

keygen

output (这俩我没看懂神马意思,也是大部分浏览器不兼容)

详细可以去w3school看看,

w3school/...es.asp

问题八:html 常用的表单控件类型有哪些 5分 文本字段 text

密码 password

隐藏域 hidden

文本区域 textarea

复选框 checkbox

单选按钮 radio

选择列表 select

图像域 image

文件域 file

按钮 button

提交按钮 submit

大致就是这些。

问题九:关于html中,跟表单相关的元素都有哪些? w3school/html/html_forms.asp

问题十:表单中一般包括哪些常用的表单元素 基本介绍

本专题从最基础的表单知识,到表单的高级应用,让你有一个比较全面地认识,相信你在读完本专题以后,一定会对表单非常熟悉。 表单概述 表单,在网页中的作用不可小视,主要负责数据采集的功能,比如你可以采集访问者的名字和e-mail地址、调查表、留言簿等等。

[编辑本段]表单的组成

一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮:包括提交按钮、复位按钮和一般按钮;用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作。 为了顾及不同的网页设计工具,本文只讲述代码的设计,不具体讲述 *** 作方法,下面就是表单的HTML代码设计要点:

html5 新增了的表单元素和属性如下:

属性:

1、 form属性

在HTML5中表单元素可放在表单之外,通过给该元素添加form属性即可。

2、 formaction属性

HTML5给提交按钮(如button、submit、image等)增加了formaction属性,以便提交到不同的服务器地址

3、formmethod属性

既然对提交按钮有了formaction属性,就相应的有了formmethod属性

4、 placeholder属性

给文本框(text或textarea)处于未输入状态时的一种文字提示

5、autofocus属性

自动获得焦点,一个页面只能有一个控件具有该属性

6、 list属性

HTML5为单行文本框增加了一个list属性,该属性的值为某个datalist元素的id,增加该属性后的单行文本框类似选择框(select),但允许用户自定义输入,为了避免没有支持该蒜素的浏览器出现错误,我们通常使用CSS设置不显示

6、autocomplete属性

自动完成允许浏览器预测对字段的输入,在HTML5之前自动完成不能自定义设置,任何人都可以看到,所以存在安全隐患,在HTML5中可以通过此属性来指定“on”、”off“或“”(不指定)三种,不指定时使用浏览器的默认值,这取决于各浏览器的决定。

元素:

HTML5大幅度地增加和改良了input元素的种类

search 与text文本框类似,用于搜索;

tel 与text文本框类似,用于电话;

url 与text文本框类似,用于url格式的地址;

email 与text文本框类似,用于email格式的地址;

number 与text文本框类似,用于数值;

range 只允许输入一段范围内的数值,通过min和max属性来设置范围;

color 颜色文本框,“#000000”格式的文字;

file 文件选择文本框,HTML5中通过multiple属性可以多选;

datetime、date、month、week、time、datetime-local 各种日期与时间输入的文本框;

output 定义不同类型的输出;

表单验证

自动验证

所谓自动验证,就是通过为元素添加相应的属性来达到验证的要求

1、 required属性

具有该属性的元素,如果其内容为空则不允许提交,并给出相应的提示

2、pattern属性

具有该属性的元素,如果内容不为空则把内容与pattern的值进行正则匹配,匹配不成功则不通过并提示

3、min属性和max属性

它们是值类型和日期类型的input元素专用属性,限制了输入的范围

4、 step属性

控制元素的值增加或减少的步幅,如输入11-100之间的数字,且步幅是5,那么只能输入11、16、21....

显示验证

除了给元素添加属性来自动验证外,在HTML5中,form元素与输入元素(input)包括select元素和textarea都具有一个checkValidity方法,调用该方法可以进行手动验证,checkValidity方法以boolean的形式返回验证结果。

取消验证

取消表单验证有两个属性:用于form的novalidate和用于submit的formnovalidate:

自定义错误

在HTML5中没经过验证的表单浏览器会有默认的提示,但也提供了通过JavaScript的来设置自定义错误提示信息

增强的页面元素

1、figure元素

figure是个组合元素,可以带标题figcaption,一个figure只允许放置一个figcaption

2、details元素

details提供了一种替代Javascript的、将画面上局部区域进行展开或收缩的方法

3 、mark元素

mark元素表示页面需要突出显示或高亮显示的部分,经典的是搜索结果

4、progress元素

可以给progress设置value和max属性,value表示已经进行的,max表示总数,value和max只能为有效的浮点数,value必须大于0小于等于max。如果不给progress设置这两个属性,则是动态显示正在进行,进度不确定。

5、 meter元素

定义度量衡

6、改良的ol列表

在HTML5中为ol元素添加了start属性和reversed属性

7、改良的dl列表

dl是专门用来定义术语的列表,在HTML5中为dt增加了名字dfn

8、 另外还有cite用于表示作者,small用于标识“小型文本”等


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/8285948.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-15
下一篇 2023-04-15

发表评论

登录后才能评论

评论列表(0条)

保存