表单

语法：

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



//method:规定如何发送表单数据常用值：get  | post
//action:表示向何处发送表单数据

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

post get 区别：

GET在浏览器回退时是无害的，而POST会再次提交请求。

GET产生的URL地址可以被Bookmark，而POST不可以。

GET请求会被浏览器主动cache，而POST不会，除非手动设置。

GET请求只能进行url编码，而POST支持多种编码方式。

GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。

GET请求在URL中传送的参数是有长度限制的，而POST没有。

对参数的数据类型，GET只接受ASCII字符，而POST没有限制。

GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。

GET参数通过URL传递，POST放在Request body中。

表单元素格式：

<input  type="text"  name="fname" value="text"/>

type 元素类型  name : 元素名称  value: 元素值

 

 

 表单元素：

 文本框：

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

复选框：

<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按钮"/>
//普通

多行文本域：

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

文件域：

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


//会自动验证Email地址格式是否正确

网址:

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

//会自动验证URL地址格式是否正确

数字:

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

搜索框:

<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="保存" >

//禁用