表单高级应用

表单高级应用

列表

• 列表框 --select控件
  • 浏览网页时，经常看到包含很多选项的下拉菜单，当点击下拉框三角时，会出现选择列表，列表选择所以的城市，出生日期年月 兴趣爱好等

语法

<select name="列表名称" size="行数">
    <option value="选项的值" selected="selected"></option>
    <option value="选项的值" ></option>
    
</select>

演示：

<select name="列表" size="1" >
            <option value="列表二" selected="selected">列表一</option>
            <option value="列表二" >列表二</option>
            <option value="列表二">列表三</option>
        </select>

datalist控件

• datalist元素
  • 用于定义输入框的选项列表，列表通过datalist内的option元素进行创建。如果用户不希望从列表中选择某相，也可以自行输入其他内容。

示例：

Webpage:<input type="url" list="url_list" name="link"/>
<datalist id="url_list">
<option label="W3School" value="http://www.W3School.com.cn"/>
    <option label="google" value="http://www.google.com"/>
</datalist>

文本域

• 文本域textarea
  • 通过textarea 控件可以以轻松地创建多行输入文本输入框。

语法：

<textarea name="shoeText" sols="x" rows="y" >文本内容</textarea>

/*
textarea
多行文本领域

name单元原属名称

cols="x"
显示的列数

rows="y"
显示·的行数
*/

表单的高级应用

• 表单的高级应用

  • 隐藏域

  • 只读

  • 禁用

隐藏域

• 异常域
  • 方便服务器端”记住“ 客户端的信息 ‘但又不希望客户看到的数据

语法：

<input type="hidden" name="..." value="..."/>

示例：

<form action="" method=post>
<p>
    用户: <input name="name" type="text" />
    </p>
<p>
    密&nbsp;码:<input name="pass" type="password"
/>  
    </p>
    
    <p>
        <input type="submit" value="提交"/>
    </p>
    <p>
        <input type="hidden" value="admin" name="userid">
    </p>
</form>

只读和禁用属性

• 只读和禁用属性

  • readonly:希望某个框的内容的内容只允许用户看，不能修改

  • disabled：因没达到使用条件，限制用户使用

示例：

<textarea name="content" cols="60" rows="8" readonly="readonly">
款合同签订后生效，但还没有履行，提款合同就是支用，在贷款合同约定下支用具体款项。银监会的受托支付等规定就是约束支款行为的。
比如你合同签了15万，但有支用约束，根据你提供的资料，银行放款（你提款），可能银行根据约定只同意支用10万元。
</textarea><br/><br>
同意以上合同<input  name="agree" type="chec"/>
<input name="btn" type="submit" value="注册"/>

表单元素的标注

• 表单元素的标注
  • 增强鼠标的可用性
  • 自动将焦点转移到与该标注相关的表单上

示例：

<form>
    请选择
    <lanel for="male">男</lanel>
    <input tyoe="radio" name="gender" id="male"/>
    <lamel fof="frmale">女</lamel>
    <input type="radio" name="gender" id="frmale"/>
     
</form>

表单的验证

• 表单验证的好处
  • 减少服务器的压力
  • 保证数据的可行性和安全性
• placeholder
  • 提供一种提示（hint），描述输入区域所期待的值
• required
  • 规定必须在提交之前填写输入域（不能为空）
• pattern
  • 规定用于验证input 域的正规则表达式

paceholder属性

• input类型的文本框提供一种提示
• 可以描述文本框期待用户输入何种内容
• 提示语默认显示，当文本框中输入内容提示语消失
• 适合于input标签：text、search 、url 、email和password等类型

---

没更新