html-表单

HTML 表单用于收集用户输入

一:表单属性

  <form> 常用属性的列表

  

属性描述
action 规定向何处提交表单的地址(URL)(提交页面)。
enctype 规定被提交数据的编码(默认:url-encoded)。
method 规定在提交表单时所用的 HTTP 方法(默认:GET)。

  注:   

  1)method 属性规定在提交表单时所用的 HTTP 方法(GET 或 POST)

    get:会把所有的参数拼成url发给后台
    s4.html?user=123&emial=122..  

    数据发送有两部分:一是请求头,一部分是内容:get会把发送内容放在请求头;post会数据放在内容提交过去

    就是体现形式不一样。通过听报都可以拿到内容。

  2) name属性:如果要正确地被提交,每个输入字段必须设置一个 name 属性。  

  如果向后台传弟标识一定要有name以区分是那个参数的,传递的是一个字典

  {"user":"123","emial":"12@126.com","password":"1234"}

二:表单元素

 1)input

  input type="text" name属性,让后台拿数据
  input type="password" name
  input type="submit" value提交按钮,表单 value相当于默认值
  input type="button" 按钮
  input type="radio" 单先框,name属性(name相同则互斥) value

  input type="checkbox" 复选框value,name属性(批量获取数据)单先框,复选框设置默认旨

  checked="checked"input type="file" 上传文件
  在form里面有依赖关系enctype="multipart/form-data"表示一点一点上传文件

  input type="reset" value="重置"


  input type="radio" name="gender" value="1"表示name表示是一组,只能选一个,但是后面区分不了。所以还要加vaule
  input type="radio" name="gender" value="0"

 

   <input type='file' value='file' />   <p>提交文件时: enctype='multipart/form-data' method='POST'</p>

  2) textarea 多行文本   

  也可以提交到后面<textarea name="meno">默认值</textarea>

  3) select 下拉框  

 <select name="select" size="10">    

    <option value="1" selected="selected">1</option> 默认值
    <option value="2">2</option>
  </select>

  多选
  <select multiple="multiple" name="select" size="2"> 默认size=1
  <option value="1" selected="selected">1</option>
  <option value="2">2</option>
  </select>
  分组
  <select >
  <optgroup label="上海">1</optgroup>
  <option value="2">2</option>
  </select>

 三:Input 属性

  1)value 属性

    value 属性规定输入字段的初始值

  2) readonly 属性

    readonly 属性规定输入字段为只读(不能修改)

  3)disabled 属性

    disabled 属性规定输入字段是禁用的。

    被禁用的元素是不可用和不可点击的。

    被禁用的元素不会被提交。

  4)size 属性

    size 属性规定输入字段的尺寸(以字符计)

  5)maxlength 属性

    maxlength 属性规定输入字段允许的最大长度:

四:用 <fieldset> 组合表单数据

  <fieldset> 元素组合表单中的相关数据

  <legend> 元素为 <fieldset> 元素定义标题。 

  <fieldset>
    <legend>登录</legend>
    <label>用户名</label>
  </fieldset>

 

五: label

  用于点击文件,使得关联的标签获取光标
  <label for="username">用户名:</label>
  <input id="username" type="text" name="user" />

posted on 2017-09-17 09:52  shisanjun  阅读(128)  评论(0编辑  收藏  举报

导航