表单

 

表单:收集用户的输入 发送到后台
  <form action="后台地址" method="提交方式" 提交方式:get(默认) post >
    表单元素
  </form>

  <fieldset>表单外边框</fieldset>
  <legend>表单标题 </legend>

 

  1、表单元素的通用格式

    label标签:界面友好
      两种方式:
        直接label套表单元素 label > <input type="radio" name="sex">男 </label>
        根据绑定元素id <input id="rad" type="radio" name="sex"><label for="rad">女</label><br>

    <input type="类型">
      表单元素:
        文本类型:
          文本框:text
          密码框:password
          隐藏域:hidden
          多行文本:textarea
        选择域:
          单选:radio
          多选:checkbox
          下拉:select option
        按钮:
          补充按钮:button
          提交按钮:submit
          重置:reset
        其他:文件file 需要属性 enctype="multipart/form-data" 文件上传支持 ,
           图片img,日期date,颜色color


  2、下拉格式
    <select name="" id="">
      <option value="">未知</option>
      <option value="">苗条</option>
      <option value="">小巧</option>
    </select>

3、多行文本格式
  <textarea name="" id="" cols="30" rows="10">

  </textarea>

  练习:
    <form action="#" method="get">

            注释:{method传值方式  : get传值方式  form.html?uid=123 & pwd=pwd ?键值对&键值对
                    post传值方式 在请求里面看不到}
      账号:<input type="text" name="uid"><br>
      密码:<input type="password" name="pwd"><br>
      <button>登录</button>
    </form>
    

  练习:
    <fieldset>
      <legend>注册表单</legend>
      <form action="#" method="post" enctype="multipart/form-data">
        用户名:<input type="text" name="uid1"><br>
        密码:<input type="password" name="pwd1"><br>
        隐藏域:<input type="hidden" name="hid">123456<br>

        性别:<label > <input type="radio" name="sex">男 </label>
                        注释:{radio 的 name用来分组,一组传一个值}
           <input id="rad" type="radio" name="sex"><label for="rad">女</label><br>

        民族: <select name="" id="">
            <option value="">汉族</option>
            <option value="">满族</option>
            <option value="">蒙古族</option>
            </select><br>
        爱好: <input type="checkbox">英雄联盟
           <input type="checkbox">英雄联盟
           <input type="checkbox">英雄联盟 <br>
        个人简介: <textarea name="" id="" cols="30" rows="10"></textarea><br>
        文件上传: <input type="file"> <br>
        <input type="button" value="普通注册按钮"><br>
        <input type="submit" value="提交注册按钮"><br>
        <input type="reset" value="重置注册按钮"><br>
      </form>

    </fieldset>


    <fieldset>
      <legend>htnl5新增表单元素</legend>
      <form action="#" method="post">
        email: <input type="email"> <br>
        month:<input type="month"> <br>
        number:<input type="number"> <br>
        <button>提交</button>
      </form>
    </fieldset>

posted @ 2018-07-09 16:53  wangjinggang  阅读(79)  评论(0编辑  收藏  举报