html button 隐藏_HTML 表单

点击上方 蓝字关注我们~软件测试大师  让测试so easy 01 表单语法

常用值：get|post)

action="result.html">(表示向何处发送表单数据)

名字：

密码：

name="Button" value="提交"/>

name="Reset" value="重填“/> 

经验：在实际网页开发中通常采用post方式提交表单数据

02 表单元素格式

1.语法：

 value="text"(input元素的值)/>

属性	说明
type	指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image 和 button，默认为 text
name	指定表单元素的名称
value	元素的初始值。type 为 radio时必须指定一个值
size	指定表单元素的初始宽度。当 type 为 text 或 password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
maxlength	type为text 或 password 时，输入的最大字符数
checked	type为radio或checkbox时，指定按钮是否是被选中

03 表单元素

1.文本框-语法

name="userName"(文本框名称)

value="用户名"(文本框初始值)

size="30"(文本框长度)

maxlength="20"(文本框可输入最多字符) />

2.密码框-语法

name="pass"(密码框的名称) 

size="20"(密码框的长度) />

3.单选按钮-语法

type="radio"(单选按钮框)

value="男"(值) 

checked(单选按钮选中状态)/>男

="radio" value="女" />女

4.复选框-语法

name="interest"

value="sports"(值)/>运动

type="checkbox"

name="interest"

value="talk"checked(复选框选中状态)

/>聊天

name="interest"

value="play"/>玩游戏

5.列表框-语法

selected="selected"(默认选中项)>…

…

6.按钮-语法

name="butReset" 

value="reset按钮"(按钮上显示的文字)>

name="butSubmit"

value="submit按钮">

value="button按钮"/>图片按钮

type="image" src="images/login.gif"/(图片路径)>

7.多行文本域-语法

name="showText" 

cols="x"(显示的列数) 

rows="y"(显示的行数)>文本内容

8.文件域-语法

enctype="multipart/form-data"(表单编码属性)>

type="file"(文件域)

name="files" />

name="upload" value="上传" />

9.邮箱-语法

邮箱:

type="email"(邮箱) 

name="email"/>

注意：会自动验证Email地址格式是否正确

10.网址-语法

请输入你的网址:

name="userUrl"/>

注意：会自动验证URL地址格式是否正确

11.数字-语法

请输入数字:

name="num"

min="0"(允许的最小值)

max="100"(允许的最大值)

step(合法的数字间隔)="10"/>

12.滑块-语法

请输入数字:

name="range1"

min="0"(允许的最小值)

max="10"(允许的最大值)

step(合法的数字间隔)="2"/>

13.搜索框-语法

请输入搜索的关键词:

name="sousuo"/>

04 表单的高级应用

1.隐藏域-语法

value="666"

name="userid">

2.只读和禁用-语法

type="text"

value="张三"  readonly(只读文本框)>

value="保存" >

3.表单元素的标注

(1)增强鼠标的可用性

(2)自动将焦点转移到与该标注相关的表单元素上

4.语法

标注的文本

name="gender"id="male"/(表单元素id)>

05 表单的初级验证

1.表单验证的好处

(1)减轻服务器的压力

(2)保证数据的可行性和安全性

2.表单初级验证的方法

  1.placeholder      2.required           3.pattern

3.placeholder

(1)input类型的文本框提供一种提示(hint)

(2)可以描述文本框期待用户输入何种内容

(3)提示语默认显示，当文本框中输入内容时提示语消失

(4)适合于input标签：text、search、url、email和password等类型

语法：

name="sousuo" 

placeholder(文本框输入内容提示)="请输入要搜索的关键字"/>

4.required

(1)规定文本框填写内容不能为空，否则不允许用户提交表单

(2)适合于input标签：text、search、url、email、password、number、checkbox、radio、file等类型

语法：

5.pattern

 用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单

语法：

(本文来源：北方的南先生 CSDN)

“今朝有心苦勤奋，明朝一举步青云”

这里是软件技术大师专门分享

软件工程师成长方向和各种 tips

面试技巧、职场知识以及其他有趣的内容...

END 

扫码关注我们

更多学习资料和干货等着你们

▼

往期精彩回顾

▼

软件测试者宝藏资源库

萌新能不能转行软件测试？ 点分享 点点赞

点在看