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 ↩︎
目录
相关文章
|
1月前
|
移动开发 前端开发 数据安全/隐私保护
8.使用html制作表单
8.使用html制作表单
11 0
|
1月前
编程笔记 html5&css&js 022 HTML表单概要
编程笔记 html5&css&js 022 HTML表单概要
|
3月前
|
前端开发 JavaScript
Playwright系列(9):常见操作HTML 元素方式
Playwright系列(9):常见操作HTML 元素方式
|
3月前
|
缓存 前端开发 JavaScript
13个很酷但很少有人知道的HTML元素
13个很酷但很少有人知道的HTML元素
36 0
13个很酷但很少有人知道的HTML元素
|
3月前
|
JavaScript
用什么代码可以在页面添加html元素呢?
用什么代码可以在页面添加html元素呢?
|
10天前
|
移动开发 前端开发 JavaScript
《HTML 简易速速上手小册》第8章:HTML 表单高级技术(2024 最新版)
《HTML 简易速速上手小册》第8章:HTML 表单高级技术(2024 最新版)
27 0
|
10天前
|
移动开发 JavaScript 前端开发
《HTML 简易速速上手小册》第4章:HTML 的表单与输入(2024 最新版)
《HTML 简易速速上手小册》第4章:HTML 的表单与输入(2024 最新版)
31 0
|
11天前
|
JavaScript 前端开发
js怎么删除html元素
js怎么删除html元素
23 10
|
21天前
|
JavaScript
Vue移动 HTML 元素到指定位置 teleport 标签
Vue移动 HTML 元素到指定位置 teleport 标签
|
1月前
|
数据安全/隐私保护
HTML表单(Form)常用控件
HTML表单(Form)常用控件。
15 1