HTML6表单运用与初级验证

表单应用

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>

3、隐藏域 hidden

比如把密码隐藏

<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总结