【学习笔记】表单的应用

【学习笔记】表单的应用

  • 只读 readonly,在表单中设置为readonly,就不可更改

    <p>账号:<input type="text" name="username" value="默认值" maxlength="6" readonly></p>

    image-20220912171902086

 

  • 禁用 disable,设置后,就不可选了

    <p>性别:
        <input type="radio" value="boy" name="sex" disabled/>男
        <input type="radio" value="girl" name="sex"/>女
    </p>

image-20220912172019484

 

  • 隐藏域 hidden

    <p>密码:<input type="password" name="pwd" hidden></p>

    image-20220912172742890

    可以设置默认值

  • 增强鼠标可用性(点击文字,可以直接定位到输入框)

    标签<label> 属性for它指向的是某个输入框的id

    <p>
        <label for="mark">你点这里</label>
        <input type="text" id="mark">
        
    </p>

    image-20220912173152950

 

表单初级验证

为什么要进行表单验证?

为了减轻服务器的压力,保证数据的安全性

  • placeholder 提示信息,用于输入框中

    <p>账号:<input type="text" name="username" value="默认值" maxlength="6" placeholder="请输入账号"></p>

    image-20220912185243759

 

  • required 非空验证

    <p>账号:<input type="text" name="username"  maxlength="6" placeholder="请输入账号" required></p>

    image-20220912185456192

 

  • pattern 正则表达式

    <p>
        <input type="text" name="diyemail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
    </p>

    image-20220912185855075

posted @ 2022-09-12 19:01  GrowthRoad  阅读(27)  评论(0)    收藏  举报