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>

  • 相关阅读:
    Sublime Text 3 破解 + 注册 + 汉化 + 教程 + 快捷键大全 + 中文乱码 +编译JAVA
    cocos2dx 翻牌效果
    php中将SimpleXMLElement Object转化为普通数组
    VS2013+lua5.3.1 环境配置
    Jquery相册 fancybox-1.3.4
    JS~字符串长度判断,超出进行自动截取(支持中文)
    JS /jquery 时间戳与日期转换
    php验证身份证号码正确性
    JS身份证验证
    逆向编程一,PE结构拉伸内存
  • 原文地址:https://www.cnblogs.com/wjglm/p/9284617.html
Copyright © 2011-2022 走看看