第三章 表单

目录

1.表单语法

2.表单元素格式

3.表单元素

4.表单的高级应用

5.表单的初级验证

---

1.表单语法

<!-- method:提交表单数据的方式get/post
    action:向何处发送表单数据 -->    
<form method="post" action="main.html">
   <p>名字：<input name="name" type="text"/></p>
   <p>密码：<input name="pwd" type="password"/></p>
   <p><input name="Button" type="submit" value="提交"/>
   <input name="Reset" type="reset" value="重填"/></p>
</form>

2.表单元素格式

<input name="input框名称" type="input框类型" value="input框的值"/>

type:类型（默认text、password、checkbox、radio、submit、reset、file、hidden、image、button）

name：表单元素名称

value：初始值（type为radio时必须有值）

size：初始宽度（type为text和password时，大小以字符为单位；其他类型，宽度以像素为单位）

maxlength：输入的最大字符数

checked：（radio、checkbox）按钮是否被选中

3.表单元素

• 文本框

  <input name="文本框名称" type="text" value="文本框的值" size="文本框长度" maxlength="文本框可输入最多字符"/>

• 密码框

  <input name="密码框名称" type="password" size="密码框长度" maxlength="文本框可输入最多字符"/>

• 单选按钮(radio:单选按钮 name:表示一组)

  <input name="单选框名称" type="radio" value="值" checked/>男
  <input name="单选框名称" type="radio" value="值"/>女

• 复选框(checkbox:复选框 / checked：表示复选框选中状态 name:表示一组)

  <input type="checkbox" name="名称" value="值"/>运动
  <input type="checkbox" name="名称" value="值" checked />聊天
  <input type="checkbox" name="名称" value="值"/>玩游戏

• 列表框(selected="selected":表示默认选中项)

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

• 按钮

  <input  type="reset" name="butReset" value="按钮值">重置
  <input  type="submit" name="butSubmit" value="按钮值">提交
  <input  type="button" name="butButton" value="按钮值"/>普通按钮
  <input  type="image"  src="路径"/>
  <button>按钮（可提交，form表单外可用）
  </button>

• 多行文本框(textarea:多行文本域)

  <textarea name="showText" cols="显示的列数" rows="显示的行数">内容 </textarea>

• 文件域(enctype="multipart/form-data":表单编码属性)

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

• 邮箱(会自动验证邮箱格式是否正确)

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

• 网址(会自动验证url地址格式是否正确)

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

• 数字

  <p>请输入数字:<input type="number"  name="num" min="最小值" max="最大值" step="合法的数字间隔"/></p>
  <input type="submit"/>

• 滑块

  <p>请输入数字:<input type="range"  name="range1" min="最小值" max="最大值" step="2"/></p>
  <input type="submit"/>

• 搜索框

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

4.表单的高级应用

• 隐藏域(hidden)

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

• 只读(readonly)

  <input name="name" type="text" value="张三"  readonly>

• 禁用(disabled)

  <input type="submit "  disabled   value="保存" >

• 标注

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

5.表单的初级验证

• placeholder

  提示语默认显示，当文本框中输入内容时提示语消失，适合于input标签：text、search、url、email和password等类型

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

• required

  规定文本框填写内容不能为空，否则不允许用户提交表单，适合于input标签：text、search、url、email、password、number、checkbox、radio、file等类型

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

• pattern

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

  <input type="text" name="tel" required pattern="正确的正则表达式"/>