表单应用
1、只读 readonly
比如输入名字
默认为admin 不允许你去改
2、禁用 disable
比如在选是男是女时把男生禁用,都默认为女生
<p>性别:
<input type="radio" value="boy" name="sex" checked disabled/>男
<input type="radio" value="girl" name="sex"/>女
</p>
禁用以后不能点男
还可以禁用提交
<input type="submit" disabled>
hidden
3、隐藏域 比如把密码隐藏
<p>密码:
<input type="password" name="pwd" hidden>
</p>
运行效果:
密码框就没有了
<p>密码:
<input type="password" name="pwd" hidden value="123456">
</p>
在隐藏的基础上可以使用默认密码比如密码123456,虽然隐藏了但是他的值还在
4、增强鼠标可用性
比如 一点就自动跑到文本输入框里面
<p>
<label for="mark">你点我试试</label>
<input type="text" id="mark">
</p>
for可以指向id(这里两个for和id要一致)
label是指向一个位置
也可以放在搜索框里面,这样一点你点我试试然后搜索框就亮了(搜索框可以输入文字了)
搜索框里面可以加一个id
<p>
<input type="search" name="search" id="mark">
</p>
表单初级验证
(高级是用js自己去写验证) 目的减轻服务器压力,保证数据安全
常用方式
1、提示信息 placeholder
可以用在所有控件上面,用在多选框就不行,一定是输入框的控件(也就是输入框),比如输入框,文本域,邮箱
<p>名字:
<input type="text" name="username" placeholder="请输入用户名">
</p>
你只要一点输入框上去他的提示信息请输入用户名就消失了
2、非空判断required
表示元素不能为空
<p>名字:
<input type="text" name="username" placeholder="请输入用户名" required>
</p>
也用在所有文本框中
<p> 邮箱:
<input type="email" name="email" required>
</p>
<p> URL:
<input type="url" name="url" required>
</p>
3、pattern
正则表达式
自己去百度等搜索正则表达式
比如:
正则表达式网站
https://www.jb51.net/tools/regexsc.html
比如自定义一个邮箱
pattern= 就是自己去百度出来复制粘贴在pattern后面
HTML总结