HTML表单

表单

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

表单域

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

实例

   <p>  名字：<input name="name" type="text" >  p>
   <p>  密码：<input name="pass" type="password" >  p>
   <p>
      <input type="submit" name="Button" value="提交"/>
      p>
form>

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

表单元素

文本类

文本框：

密码框：

文本内容

<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>

其他

隐藏域

只读和禁用

表单元素的标注

1.增强鼠标的可用性

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

语法

标注的文本

表单初级验证

表单验证的好处

    1.减轻服务器的压力

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

表单初级验证的方法

 1.placeholder        2.required          3.pattern

placeholder

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

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

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

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

语法：

required

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

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

语法：

pattern

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

语法：