HTML表单

表单

HTML 表单用于搜集不同类型的用户输入。

表单域

用来容纳表单元素及接收表单信息，并规定如何发送表单数据 。

实例

<form  method="post"（规定如何发送表单数据，常用值：get|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>

经验：在实际网页开发中通常采用post方式提交表单数据

表单元素

文本类

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

密码框：<input type="password " name=“pass”(密码框的名称) size=“20”(密码框的长度) />

<textarea(多行文本域) name=“showText” cols=“x”(显示的列数) rows=“y”(显示的行数)>文本内容

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

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

注意：会自动验证URL地址格式是否正确

<p>请输入数字:<input type="number"(数字)  name="num"
 min="0"(允许的最小值) max="100"(允许的最大值) step(合法的数字间隔)="10"/></p>

选择

单选

<input name="gen" type="radio"(单选按钮框) value="男"(值)
  checked(单选按钮选中状态)  />男
<input name="gen" type="radio" value="女" />女

复选

<input type="checkbox"(复选框) name="interest" value="sports"(值)/>运动
<input type="checkbox" name="interest" value="talk" checked(复选框选中状态) />聊天
<input type="checkbox" name="interest" value="play"/>玩游戏

列表

<select(列表框) name="列表名称" size="行数">
<option value="选项的值" selected="selected"(默认选中项)>…</option >
<option(选项) value="选项的值">…</option >
</select>

按钮

<input type="reset" (重置按钮) name="butReset"  value="reset按钮"(按钮上显示的文字)>
<input type="submit"(提交按钮) name="butSubmit" value="submit按钮">
<input type="button"(普通按钮) name="butButton" value="button按钮"/>

<input type="image" （图片按钮） src="images/login.gif"/(图片路径)>

文件上传

<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="range"(滑块)  name="range1"
 min="0"(允许的最小值) max="10"(允许的最大值) step(合法的数字间隔)="2"/></p>

搜索

 <form action="http://www.baidu.com/baidu" target="word">

​    <input class="kuang" type="text" name="word">

​    <input type="submit" value="Find">

  </form>

其他

隐藏域

<input type=“hidden”(隐藏域) value=“666” name=“userid”>
只读和禁用

<input name=“name” type=“text” value=“张三” readonly(只读文本框)>
<input type="submit " disabled （禁用） value=“保存” >

表单元素的标注

1.增强鼠标的可用性

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

语法

<label for=“id”(表单元素的id)>标注的文本
<input type=“radio” name=“gender” id=“male”/(表单元素id)>

表单初级验证

表单验证的好处

    1.减轻服务器的压力

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

表单初级验证的方法

 1.placeholder        2.required          3.pattern

placeholder

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

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

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

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

语法：

<input type=“search” name=“sousuo” placeholder(文本框输入内容提示)=“请输入要搜索的关键字”/>

required

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

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

语法：

<input type=“text” name=“username” required/(必填项)>

pattern

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

语法：

<input type=“text” name=“tel” required pattern（验证规则，正则表达式）="^1[358]\d{9}" />