Html5知识点总结03

表单语法

<form  method="post(规定如何发送表单数据常用值：get|post
 实际网页开发中通常采用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>

表单元素格式
<input type="text(input元素类型)" name="fname(input元素名称)" value="text(input元素的值)"/>

文本框

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

密码框

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

单选按钮

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

注意：name值要一样

复选框

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

多行文本域

<textarea  name="showText"  cols="x(显示的列数)"  rows="y(显示的行数)">文本内容 </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>

邮箱 （会自动验证Email地址格式是否正确）

<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="0" max="100" step="10（合法的数字间隔）"/></p>
<input type="submit"/>

滑块

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

搜索框

search 输入类型用于搜索字段，比如站内搜索或谷歌搜索等。
搜索字段的外观与常规的文本字段无异。

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

隐藏域

<input type="hidden(隐藏域)" value="666" name="userid">

只读和禁用

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

表单元素的标注

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

<label for="male">标注的文本</label>
<input type="radio" name="gender" id="male"/>
<label> 标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
标签的 for 属性应当与相关元素的 id 属性相同。

表单初级验证的方法

1.placeholder

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

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

2.required

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

<input type="text" name="username"  required（必填项）/>

3.pattern

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

<input type="text" name="tel"  required pattern="^1[358]\d{9}" />
*以13、15、18开头的11位数字