HTML表单元素

简介: HTML表单元素
表单

一、表单的语法:





1.提交方式:

get:不安全,地址栏里面有提交内容

post:相对安全,地址栏里面不显示提交的内容

2.提交按钮:submit

3.重置按钮:reset

4.input中常用的属性:

1)type:表示表单元素的类型,常见的值,text,password,checkbox,radio,submit,reset,file,email,number,url,hidden,image,button,search。

2)name:指定表单元素的名称。

3)value:指定表单元素的初始值

4)size:指定表单元素的初始宽度,如果type为text或者password,那么此属性以字符为单位,否则以像素为单位。

5)maxlength:指定输入的最大字符数,默认为无限制

6)checked:指定单选按钮或者多选框是否被选中

5.密码表单:type=“password”

6.单选按钮:

语法:男

注意事项:name的值必须一样,才能实现单选

7.复选框:

注意:checked为默认选中。

8.下拉列表:

语法:


选项一

选项二


9.按钮:

普通按钮:普通按钮


提交按钮:

重置按钮:

10.多行文本域:

显示的文本

11.上传文件:


注意:上传的文件的时候,需要在标签里面添加属性(enctype=“mutipart/form-data”)

12.邮箱:


13.数字:



14.搜索:


二、表单的高级应用:

1.设置表单的隐藏域:


2.表单的禁用与只读设置:

只读:readonly

禁用:disabled

3.表单元素标注:


4.表单验证的好处:

缓解服务器的压力

保证数据的可行性和安全性

5.placeholder:提示内容,这种提示可以描述文本框期待用户输入何种内容。

6.非空验证:required

7.正则表达式验证:pattern

eg:电话号码的正则表达式,pattern="1\d{9}"


  1. 358 ↩︎
相关文章
|
4天前
|
移动开发 开发者 UED
HTML5 语义元素详解
HTML5引入了诸多语义元素
|
6天前
|
存储 JavaScript 前端开发
用HTML DOM实现有条件地渲染网页元素(下)
用HTML DOM实现有条件地渲染网页元素(下)
|
6天前
|
JavaScript 前端开发 容器
用HTML DOM实现有条件地渲染网页元素(上)
用HTML DOM实现有条件地渲染网页元素(上)
|
11天前
|
移动开发 前端开发 HTML5
Twaver-HTML5基础学习(8)拓扑元素(Element)_网元(Element)、节点(Node)
本文介绍了Twaver HTML5中的拓扑元素(Element),包括网元(Element)、节点(Node)和连线(Link)的基本概念和使用方法。文章详细解释了Element的属性和方法,并通过示例代码展示了如何在React组件中创建节点、设置节点属性和样式。
22 1
Twaver-HTML5基础学习(8)拓扑元素(Element)_网元(Element)、节点(Node)
|
11天前
|
移动开发 前端开发 JavaScript
Twaver-HTML5基础学习(7)Layer图层元素
本文介绍了Twaver HTML5中的图层元素(Layer),包括图层的属性和使用方法。文章详细解释了如何创建图层、设置图层属性(如可见性、可编辑性、可移动性和可旋转性),并通过示例代码展示了如何在React组件中使用图层。
10 1
Twaver-HTML5基础学习(7)Layer图层元素
|
11天前
|
移动开发 JavaScript 前端开发
Twaver-HTML5基础学习(6)告警元素(Alarm)闪烁效果
本文介绍了在Twaver HTML5中如何为告警元素(Alarm)创建闪烁效果,以提醒用户注意。文章通过示例代码展示了如何通过定时器间隔性地改变告警标签的颜色,从而实现闪烁提示效果。
25 1
Twaver-HTML5基础学习(6)告警元素(Alarm)闪烁效果
|
4天前
|
移动开发 JavaScript 前端开发
HTML5 表单属性详解
HTML5引入了多种新的表单属性,使表单创建与验证更加便捷高效。新增的输入类型包括`email`、`url`、`tel`等,常用属性有`placeholder`、`required`等。表单元素如`<form>`可设置提交方法和目标URL,`<button>`及`<input type="submit">`用于提交。新元素`<datalist>`和`<output>`提供更多功能。HTML5还提供了内置表单验证机制,增强用户体验。
|
4天前
|
移动开发 数据安全/隐私保护 UED
HTML5 表单元素详解
HTML5 引入了新的表单元素和属性,如 `<form>、<input>、<textarea>、<select>` 和 `<button>`,以及 `required、min、max` 等属性,增强了表单的创建与交互。其中,`<input>` 支持多种类型如 `email、url、date` 等,提供了更好的用户体验和数据验证。此外,HTML5 还新增了原生表单验证功能,简化了开发流程并提升了安全性。
|
7天前
|
JavaScript 前端开发
JavaScript HTML DOM 元素 (节点)
JavaScript HTML DOM 元素 (节点)
14 2
|
10天前
|
移动开发 前端开发 JavaScript
使用html-to-image代替html2canvas,结合jspdf实现下载pdf(下载截图下载前端dom元素)
本文介绍了在前端项目中,当使用`html2canvas`遇到问题时,如何使用`html-to-image`库作为替代方案,结合`jspdf`实现将DOM元素生成为PDF文件并提供下载。文章首先讨论了`html2canvas`可能遇到的问题,并提供了该库的使用示例代码。随后,详细介绍了`html-to-image`库的安装和使用方法,展示了如何将DOM元素转换为Canvas,再利用`jspdf`生成PDF文件。最后,文章通过示例代码说明了整个转换和下载的过程,并展示了效果截图。
10 0
下一篇
无影云桌面