zoukankan      html  css  js  c++  java
  • 表单

     

    表单:收集用户的输入 发送到后台
      <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>

  • 相关阅读:
    Java实现 蓝桥杯VIP 基础练习 完美的代价
    Java实现 蓝桥杯VIP基础练习 矩形面积交
    Java实现 蓝桥杯VIP 基础练习 完美的代价
    Java实现 蓝桥杯 蓝桥杯VIP 基础练习 数的读法
    Java实现 蓝桥杯 蓝桥杯VIP 基础练习 数的读法
    Java实现 蓝桥杯 蓝桥杯VIP 基础练习 数的读法
    Java实现 蓝桥杯 蓝桥杯VIP 基础练习 数的读法
    Java实现 蓝桥杯 蓝桥杯VIP 基础练习 数的读法
    核心思想:想清楚自己创业的目的(如果你没有自信提供一种更好的产品或服务,那就别做了,比如IM 电商 搜索)
    在Linux中如何利用backtrace信息解决问题
  • 原文地址:https://www.cnblogs.com/wjglm/p/9284617.html
Copyright © 2011-2022 走看看