P8、HTML基础_表单高级应用与表单初级验证

一、表单高级应用

hidden隐藏域

 <input type="hidden" name="vserKey" value="123456">
<input type="submit" value="outsubmit">

作用： 主要目的是给后台提供数据，隐藏数据显示

readonly只读与disabled禁用

readonly只读文本框

<input type="text" name="Text" id="" value="这是只读文本框" readonly>

disabled禁用

<input type="text" name="TEXt" id="" value="这是禁用" disabled>

label表单元素的标注

• 增强鼠标的可用性

• 自动将焦点移动到该标注相关的表单元素上

   <label for="A1">点击我鼠标自动移动到文本框中</label>
    <input type="text" name="Text" id="A1">
  

注意： for与id的名称一致才能实现

表单的初级验证

好处：

1. 减轻服务器压力
2. 保证数据的可行性和安全性

placeholder文本框文字提示

• input类型的文本框的一种提示

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

• 提示语默认显示，当文本框输入内容时，提示语消失

• 适用于input标签：text、search、url、email和password等类型

    <input type="search" name="Search" placeholder="请输入搜索内容" >
    <input type="submit" value="GO">
  

required规定文本框必填项

• 规定文本框填写内容不能为空，否则不允许用户提交

• 适用于input标签：text、search、url、email、password、number、checkbox、radio、file等类型

   	<label for="A5">姓名：</label>
   	 <input type="text" name="Text" id="A5" required>
  

pattern

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

    <input type="text" name="Text" id="" pattern="^1[358]\d{9}" placeholder="请输入以15/13/18开头的电话号码">