第三章、表单

目录

目录

第三章、表单

1.学习目标

2.表单语法

3.表单元素格式

4.表单元素

4.1 文本框

4.2 密码框

4.3 单选按钮

4.4 复选框

4.5 列表框

4.6 按钮

4.7 多行文本域

4.8 文件域

4.9 邮箱

4.10 网址

4.11 数字

4.12 滑块

4.13 搜索框

5. 隐藏域

6.只读和禁用

7.表单元素的标注

8.表单的初级验证

9.表单初级验证的方法

9.1 placeholder

9.2 required

9.3 pattern

10.总结

---

1.学习目标

1.会使用表单元素布局表单 2.会制作语义化的表单 3.会使用HTML5属性初步验证表单

2.表单语法

<form  method="post" action="result.html">
   <p>  名字：<input name="name" type="text" >  </p>
   <p>  密码：<input name="pass" type="password" >  </p>
   <p>
      <input type="submit" name="Button" value="提交"/>
      <input type="reset" name="Reset" value="重填“/> 
   </p>
</form>

3.表单元素格式

4.表单元素

4.1 文本框

<input  type="text"  name="userName" value="用户名"      size="30"       maxlength="20" />
    <!--    type:文本框   name：文本框名称  value:文本框初始值   size:文本框长度  maxlength:文本框最多可输入字符-->

4.2 密码框

<input  type="password "  name="pass"  size="20" />

4.3 单选按钮

<input name="gen" type="radio" value="男"  checked  />男
<input name="gen" type="radio" value="女" />女

checked:单按键按钮选中状态

4.4 复选框

<input type="checkbox" name="interest" value="sports"/>运动
<input type="checkbox" name="interest" value="talk" checked />聊天
<input type="checkbox" name="interest" value="play"/>玩游戏

checked:复选框选中状态

4.5 列表框

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

4.6 按钮

<input  type="reset" name="butReset" value="reset按钮">
<input  type="image"  src="images/login.gif" />
<input  type="button" name="butButton" value="button按钮"/>

reset：重置按钮

button：普通按钮

submit：提交按钮

注：在from中生效

4.7 多行文本域

<textarea  name="showText"  cols="x"  rows="y">文本内容 </textarea  >

cols：显示列数

rows：显示行数

4.8 文件域

<form action="" method="post" enctype="multipart/form-data">
  <p><input type="file" name="files" />
  <input type="submit" name="upload" value="上传" /></p>
</form>

4.9 邮箱

<p>邮箱:<input type="email"  name="email"/></p>
<input type="submit"/>

4.10 网址

<p>请输入你的网址:<input type="url"  name="userUrl"/></p>
<input type="submit"/>

4.11 数字

<p>请输入数字:<input type="number"  name="num" min="0" max="100" step="10"/></p>
<input type="submit"/>

min：允许的最大值

max：允许的最小值

4.12 滑块

<p>请输入数字:<input type="range"  name="range1" min="0" max="10" step="2"/></p>
<input type="submit"/>

4.13 搜索框

<p>请输入搜索的关键词:<input type="search"  name="sousuo"/></p>
<input type="submit"/>

5. 隐藏域

<input type="hidden" value="666" name="userid">

6.只读和禁用

<input name="name" type="text" value="张三"  readonly>
<input type="submit "  disabled   value="保存" >

7.表单元素的标注

增强鼠标的可用性

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

<label for="male">标注的文本</label>
<input type="radio" name="gender" id="male"/>

8.表单的初级验证

表单验证的好处：

减轻服务器的压力

保证数据的可行性和安全性

9.表单初级验证的方法

9.1 placeholder

input类型的文本框提供一种提示（hint）

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

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

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

<input type="search" name="sousuo"  placeholder="请输入要搜索的关键字"/>

9.2 required

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

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

<input type="text" name="username"  required/>

9.3 pattern

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

<input type="text" name="tel"  required pattern="^1[358]\d{9}" />

10.总结