【学习笔记】表单的应用

【学习笔记】表单的应用

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

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

  

 

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

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

 

• 隐藏域 hidden

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

  

  可以设置默认值

• 增强鼠标可用性（点击文字，可以直接定位到输入框）

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

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

  

 

表单初级验证

为什么要进行表单验证？

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

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

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

  

 

• required 非空验证

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

  

 

• pattern 正则表达式

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