0

0

全方位整理与form表单相关的元素!

藏色散人

藏色散人

发布时间:2022-08-05 11:45:17

|

4043人浏览过

|

来源于csdn

转载

html原有的表单以及表单控件

form元素

元素不会生成可视化部分。可以置顶id、class、style等核心内容,还可以指定onclick等事件属性。

除此之外还包括action(指定当单机表内确定按钮时,该表单跳转到那个地址)、method(指定提交表单时发送何种类型请求,值可以为get或者post)、enctype(指定对表达内容进行编码所使用的字符集)、name(指定表单的唯一名称)、target(指定个适用哪种方式打开目标URL)。【推荐:HTML视频教程

input元素

元素是表单控件元素中功能最丰富的,下面是几种input元素生产的:

密码输入框:

<input id="password" name="password" style="password" />

隐藏域:

<input id="hidden" name="hidden" style="hidden" />

单选框

<input id="radio" name="radio" style="radio" />

复选框

<input id="checkbox" name="checkbox" style="checkbox" />

图像域

<input id="image" name="image" style="image" />

文件上传域

<input id="file" name="file" style="file" />

提交按钮

<input id="submit" name="submit" style="submit" />

重设按钮

<input id="reset" name="reset" style="reset	" />

无动作按钮

<input id="button" name="buton" style="button" />

的一些焦点属性

checked:设置单选框、复选框初始是否处于被选中状态。
disabled:设置首次加载时用此元素。
maxlength:该属性是一个数字,指定文本框中所允许输入的最大数字。
readonly:指定文本框内的值不允许用户修改(可使用js脚本修改)。该属性是支持boolean值的属性,表示该元素的值是只读的。
size:该属性值是一个数字,指定钙元素的宽度。
src:指定图像域所显示图像的URL.
width:指定图像域所显示图像的宽度。
heigeht:指定图像域所显示图像的高度。

label元素

label元素可以指定id、class、style等核心属性,也可以指定onclick等事件属性。除此之外,还可以指定一个for属性,该属性指定该标签与那个表单控件关联。用法为for="",引号内为相关控件的id。

button元素

元素用于定义一个按钮,可以指定id、class、style等核心熟悉,还可以定义onclick等事件属性。除此之外,还可以指定如下几种元素。

disabled:指定是否禁用此按钮。
name:制定该按钮的唯一名称,该属性名称应该与id保持一致。
type:指定该按钮属于那种按钮,该属性值只能是button、reset或submit其中之一。
value:指定该按钮的初始值。可以通过js脚本进行更改。

select与option元素

元素用于创建列表框或下拉菜单,钙元素必须和元素结合适用,每个元素代表一个列表项或菜单项。
元素可以指定id、class、style等核心属性,该元素尽可以指定onchange事件属性——当该列表框或者下拉列表项内的选中选项发生改变时,出发onchange事件。

除此之外,元素还可以指定如下几个属性。

disabled:设置禁用该列表框和下拉菜单。该属性的值只能是disabled或者省略属性值。
multiple:设置该列表框和下拉菜单是否允许多选。一旦设置允许多选元素就会自动生成列表框。
size:指定该列表框和下拉菜单可同时实现多少个列表项。一旦设置允许多选元素就会自动生成列表框。

元素里,只能包含如下两种子元素。

:用于定义列表项或者菜单项。该元素里只能包含文本内容作为该选项的文本。
:用于定义列表项或者菜单线组。该元素只能包含子元素。

元素可以指定id、class、style等核心元素还可以指定onclick等事件属性。

除此之外还可以定义如下几种元素。

disabled:指定禁用该选项,该属性的值只能为disabled。
selected:指定该流标箱初始状态是否处于被选中状态。该属性的值只能是selected。
value:指定该选项对应的请求参数值。

元素可以指定元素可以指定id、class、style等核心属性,还可以指定onclick等事件响应属性。除此之外还有如下几个属性。

label:指定该选项组的标签。这个属性必填。
disabled:设置禁用该选项组里的所有选项。该属性值只能是disabled或者省略该属性值。

HTML5增强的textarea

元素用于生成多行文本域。可以指定id、class、style等核心元素,还可以指定onclick等事件属性。由于textarea的特殊性,它可以接收用户输入,用户可以选中文本域内的文本,所以还可以指定onslect、onchange两个属性,分别应用于文本域中被选中、文本被修改时间。除此之外,该元素还可以指定如下元素。

cols:指定文本域的宽度,属于必填项。
rows:指定文本的高度,属于必填项。
disabled:指定禁用该文本域。该属性值只能为disabled。
readonly:指定文本域只读。该属性值只能为readonly。
maxlength:设置该多行文本域最多可以输入的字符数。
wrap:指定多行文本域是否添加换行符。该属性支持soft和hard两个属性值。如果将属性值设置为hard,则必须指定cols属性,如果输入的字符超过了cols指定宽度导致文本换行,那么提交该表单时该多行文本域将会自动在换行处添加换行符。

fieldset与legend元素

元素可用于对表单内表单元素进行分组。,该元素可以指定id、class、style等核心元素,还可以指定如下三个属性。

name:指定该

人民网AIGC-X
人民网AIGC-X

国内科研机构联合推出的AI生成内容检测工具

下载
元素的名称。
form:该属性的属性值必须是一个有有效的
元素的id,用于指定该
元素属于该表单。
disabled:该属性用于禁用该表单元素。该属性是一个支持boolean值的属性。

HTML新增的表单属性

form的表单属性

html5为所有表单控件都新增了form属性,因此在页面上定义表单控件时更加灵活,可以随意的防止、排列表单控件,这位页面布局提供了更大的灵活性。

formaction属性

html5为处理同一表单中同时包含注册、登录两个按钮的问题,对于sumit、reset、image都可以指定formaction,该属性即可动态的让表单提交到不同的URL。

formxxxx属性

formxxxx属性类似于formaction属性,对于sumit、reset、image都可以指定formenctype、formmethod、formtarget等属性,其中:

formenctype:该属性可以让按钮动态的变成enctype属性。
formmethod:该属性可以让按钮动态的变成method属性。
formtarget:该属性可以让按钮动态的变成target属性。

autofocus属性

这是一个非常常用的属性,作用就是在打开网页的时候自动聚焦到对应的位置。用法为添加到对对应的代码中,如:<input type="password" name="name" autofocus>该代码中autofocus的作用就是在打开网页时自动聚焦到该密码框。

placeholder属性

这个属性也非常的常用,作用就是在用户为输入数据的文本框中给出对应的提示,如:<input type="text" name="username" palceholder="请输入用户名">;该代码中palceholder的作用就是在用户未在文本框中输入数据是显示请输入用户名,使页面更加的人性化。

list属性

该属性也非常的实用,在html5规范之前html表单属性是没有有类似于ComboBox的组件的。html5的list属性刚好弥补了这个不足,list属性的值应该是一个组件的id,也就是说list必须与元素结合使用。

元素相当于一个看不见的元素,用于生成一个隐藏的下拉菜单。所能包含的子元素与元素相同。该元素用于与指定的了list属性的元素结合使用。当双击list属性的文本框时,显示生成的下拉菜单。

autocomplete属性

该输赢用于控制在点击文本框时是否自动显示之前的填写历史,浏览器默认启动该功能,该属性支持两个属性值:

on:打开autocomplete,文本框下方会显示下拉菜单。
off:关闭autocomplete,文本框下方不会显示下拉菜单。

label的control属性

html5为元素提供了一个control属性,该属性用于在javascropt脚本中访问该元素所关联的表单元素。

表单中的labels属性

表单元素与元素之间具有一对多的相关联关系,元素获取他关联的表单元素适用control属性,而表单元素获取与他相关联的元素适用labels属性。

文本框中的selectionDirection属性

html5为单行文本框和多行文本域新增了一个selectionDirection只读属性,该属性用于返回文本框内的文字方向。

  • 用户正向选取文字时,返回值为forward
  • 用户反向选取文字时,返回值为backward
  • 用户没有选取文字时,返回值为上一次用户做的选择

HTML5新增的表单元素

功能丰富的input元素

HTML5为元素新增了如下几种可能的类型。

color:生成一个颜色选择器,value的值为形如#xxxxxx的颜色值。
date:生成一个日期选择器。
time:生成一个时间选择器。
datetime-local:生成一个本地日期、时间选择器。
week:生成一个供用户选择第几周的文本框。
month:生活猜呢个一个月份选择器。
max:指定日期时间的最大值。
step:指定日期、时间的步长。
email:生成一个E-mail输入框,浏览器会自动检查输入的E-mai是否符合格式。

multiple:该属性支持boolean类型,如果指定了该属性值,则表示允许输入多个E-mail地址,用英文逗号隔开。

tel:生成一个输入电话号码的文本框。
ur:生成一个输入URL的文本框,浏览器会自动检查输入的URL是否符合格式。
number:生成一个只能输入数字的文本框。

min:指定数值的最小值。
max:指定数值的最大值。
step:指定数字的步长。

range:生成一个拖动条,还会有如下的属性:

min:该拖动条的最小值。
max:该拖动条的最大值。
step:指定拖动条的步长。

search:生成一个专门用于输入搜索关键字的文本框。

output元素

HTML5新增了一个表单控件,该元素用于显示输出。该元素除了可以指定id、class、style等核心属性外还可以指定如下属性。

for:该属性制动该元素将会显示那个或者那些元素的值。

meter元素

HTML5还新增了一个元素,该元素表示一个已知最大值和最小值的计数仪表。该元素出了可以定义id、class、style等核心熟悉外,还可以定义如下的属性。

value:指定计数仪表的当前值。默认为0.
min:指定计数仪表的最小值,默认为0.
max:指定计数仪表的最大值。默认为1.
low:指定计数仪表指定范围的最小值,必须大于等于min的值。
high:指定计数仪表指定范围的最大值,必须小于等于max的值。
optimum:指定个计数仪表有效范围的最佳值。

progress

元素用于表示一个进度条。该元素除了可以指定id、class、style等核心属性外还可以指定如下的属性。
max:指定进度条完成时的值。
value:指定当前完成的进度值。

HTML5新增的客户端校验

使用校验属性执行校验

HTML5为表单控件添加了如下几种校验属性。

required:该属性指定该表单控件必须填写。
pattern:该属性指定该表单控件的值必须符合指定的正则表达式。
min、max、step:这三个属性只对数值类型、日期类型的元素有效,这个元素必须在min~max之间,并符合step步长。

调用checkValidity方法进行校验

  • 如果表单对i昂调用checkValidity()方法返回true,则表明该表单内的所有表单元素的输入有效

  • 如果表单对象调用checkValidity()方法返回true,则表明该表达诶的所有表单元素通过输入检验。

关闭校验

  • 元素增加novalidate属性,该属性是一个支持boolean值的属性。
  • 为submit、button元素设置formnovalidate属性,当用户通过该提交按钮提交表单时,该表单将关闭校验功能。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
C# ASP.NET Core微服务架构与API网关实践
C# ASP.NET Core微服务架构与API网关实践

本专题围绕 C# 在现代后端架构中的微服务实践展开,系统讲解基于 ASP.NET Core 构建可扩展服务体系的核心方法。内容涵盖服务拆分策略、RESTful API 设计、服务间通信、API 网关统一入口管理以及服务治理机制。通过真实项目案例,帮助开发者掌握构建高可用微服务系统的关键技术,提高系统的可扩展性与维护效率。

76

2026.03.11

Go高并发任务调度与Goroutine池化实践
Go高并发任务调度与Goroutine池化实践

本专题围绕 Go 语言在高并发任务处理场景中的实践展开,系统讲解 Goroutine 调度模型、Channel 通信机制以及并发控制策略。内容包括任务队列设计、Goroutine 池化管理、资源限制控制以及并发任务的性能优化方法。通过实际案例演示,帮助开发者构建稳定高效的 Go 并发任务处理系统,提高系统在高负载环境下的处理能力与稳定性。

38

2026.03.10

Kotlin Android模块化架构与组件化开发实践
Kotlin Android模块化架构与组件化开发实践

本专题围绕 Kotlin 在 Android 应用开发中的架构实践展开,重点讲解模块化设计与组件化开发的实现思路。内容包括项目模块拆分策略、公共组件封装、依赖管理优化、路由通信机制以及大型项目的工程化管理方法。通过真实项目案例分析,帮助开发者构建结构清晰、易扩展且维护成本低的 Android 应用架构体系,提升团队协作效率与项目迭代速度。

83

2026.03.09

JavaScript浏览器渲染机制与前端性能优化实践
JavaScript浏览器渲染机制与前端性能优化实践

本专题围绕 JavaScript 在浏览器中的执行与渲染机制展开,系统讲解 DOM 构建、CSSOM 解析、重排与重绘原理,以及关键渲染路径优化方法。内容涵盖事件循环机制、异步任务调度、资源加载优化、代码拆分与懒加载等性能优化策略。通过真实前端项目案例,帮助开发者理解浏览器底层工作原理,并掌握提升网页加载速度与交互体验的实用技巧。

97

2026.03.06

Rust内存安全机制与所有权模型深度实践
Rust内存安全机制与所有权模型深度实践

本专题围绕 Rust 语言核心特性展开,深入讲解所有权机制、借用规则、生命周期管理以及智能指针等关键概念。通过系统级开发案例,分析内存安全保障原理与零成本抽象优势,并结合并发场景讲解 Send 与 Sync 特性实现机制。帮助开发者真正理解 Rust 的设计哲学,掌握在高性能与安全性并重场景中的工程实践能力。

223

2026.03.05

PHP高性能API设计与Laravel服务架构实践
PHP高性能API设计与Laravel服务架构实践

本专题围绕 PHP 在现代 Web 后端开发中的高性能实践展开,重点讲解基于 Laravel 框架构建可扩展 API 服务的核心方法。内容涵盖路由与中间件机制、服务容器与依赖注入、接口版本管理、缓存策略设计以及队列异步处理方案。同时结合高并发场景,深入分析性能瓶颈定位与优化思路,帮助开发者构建稳定、高效、易维护的 PHP 后端服务体系。

458

2026.03.04

AI安装教程大全
AI安装教程大全

2026最全AI工具安装教程专题:包含各版本AI绘图、AI视频、智能办公软件的本地化部署手册。全篇零基础友好,附带最新模型下载地址、一键安装脚本及常见报错修复方案。每日更新,收藏这一篇就够了,让AI安装不再报错!

169

2026.03.04

Swift iOS架构设计与MVVM模式实战
Swift iOS架构设计与MVVM模式实战

本专题聚焦 Swift 在 iOS 应用架构设计中的实践,系统讲解 MVVM 模式的核心思想、数据绑定机制、模块拆分策略以及组件化开发方法。内容涵盖网络层封装、状态管理、依赖注入与性能优化技巧。通过完整项目案例,帮助开发者构建结构清晰、可维护性强的 iOS 应用架构体系。

246

2026.03.03

C++高性能网络编程与Reactor模型实践
C++高性能网络编程与Reactor模型实践

本专题围绕 C++ 在高性能网络服务开发中的应用展开,深入讲解 Socket 编程、多路复用机制、Reactor 模型设计原理以及线程池协作策略。内容涵盖 epoll 实现机制、内存管理优化、连接管理策略与高并发场景下的性能调优方法。通过构建高并发网络服务器实战案例,帮助开发者掌握 C++ 在底层系统与网络通信领域的核心技术。

34

2026.03.03

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Layui 快速入门精讲
Layui 快速入门精讲

共5课时 | 1.4万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号