首页 > 代码库 > html--表单

html--表单

表单

表单的结构:

  <form 属性="属性值">

    控件

  </form>

表单的属性:

1、name:表单的识别名称,一个页面有多处表单,通过表单的识别名称来辨认你提交的是哪个表单的数据

  <form name="bill"></form>

  <form name="game"></form>

2、action:表单数据传递到后端的路径

  <form action="xxx.action"></form>

3、mehod:把表单数据提交到服务端的方式常见的两种get;post

  get方法:默认的一种传递数据的方法,通过地址栏传递表单中的数据

    特点:不能传递敏感数据例如:密码

       不能传递大量数据,每次只能传递1024个字节

       不能上传附件

  post方法:不通过地址栏传递,直接传递到服务端

    特点:相对安全

       可以传递海量数据

       可以上传附件

控件

1、单行文本框

  <input type="text"/>  

  属性:name="名称" 文本框的识别名称(必须要有)

     size="数值" 输入框的宽度,以字符为单位

     maxlength="数值" 最多允许输入的字符数,如果超出范围则输入不进去

     value="http://www.mamicode.com/内容" 输入框中的默认数据信息

2、密码框  

  <input type="password"/>

  属性:name="名称" 密码框的识别名称(必须要有)

     size="数值" 密码框的宽度,以字符为单位

      maxlength="数值" 最多允许输入的字符数,如果超出范围则输入不进去

     value="http://www.mamicode.com/内容" 密码框中的默认数据信息

     readonly="readonly" 只读属性,只能选中不能修改

     disabled="disabled" 禁止属性,不能选中不能修改

3、单选按钮

  <input type="radio"/>

  属性:name="名称" 单选按钮的名称 

     value="http://www.mamicode.com/数据" 设置每一项单选的值(必须设置)

     <input type="radio" name="sex" value="http://www.mamicode.com/1"/>男

     <input type="radio" name="sex" value="http://www.mamicode.com/0"/>女

4、复选框

  <input type="checkbox"/> 

  属性:name="名称" 多选按钮的名称 

 

     value="http://www.mamicode.com/数据" 设置每一项的值(必须设置)

     checked="checked" 默认勾选

5、多行文本框

  <textarea></textarea> 

  属性:name 多行文本框的识别名称

     value 不能出现value属性,如果想设置默认值格式如下<textarea>默认值</textarea>

     rows 显示多少行内容

     cols 显示一行显示多少个字符

6、下拉列表

  <select>

    <option>内容</option>

    <option>内容</option>

    <option>内容</option>

    ......

  </select>

  select属性

    name 下拉列表的识别名称

  option属性

    value 代表每一项的初始值,默认值是option标签中的内容

7、隐藏域

  <input type="hidden" name="名称"/>

  隐藏域,不是给客户看而是给程序用的

8、文件域

  <input type="file"/>

  属性:name 文件域的名称

     value 不写value,而是通过单击按钮来选择文件,选中的文件就是value

9、按钮

    提交按钮<input type="submit" value="http://www.mamicode.com/按钮上的文字"/>提交数据

  图片按钮<input type="image" src="http://www.mamicode.com/图片的路径"/>属于提交按钮的一种

    重置按钮<input type="reset" value="http://www.mamicode.com/按钮上的文字"/>恢复到默认设置的状态

    普通按钮<input type="button" value="http://www.mamicode.com/按钮上的文字"/>本身没有功能,需要结合程序构成功能

 

html--表单