zoukankan      html  css  js  c++  java
  • 表单

    一.表单
     基本语法:
         <form method="表单提交方式(post/get)" action="表单提交地址">
       
        </form>
      
      二.input元素
          type:代表input元素类型
        name: 表单元素名称
        value: 表单元素初始值
        size: 表单宽度
        maxLength: 输入的最大字符数
        checked: 主要用于单选或多选按钮,代表默认选中
     
    三.常用表单元素
     
         1.普通文本框 <input type="text" name="username" value="杨凯" size="30px" maxlength="10"/>
     
          2.密码框  <input type="password" name="password" size="30" maxlength="16"/>
     
         3.单选按钮(name属性必须有,值相同)  
             <input type="radio" name="gender" value="男" checked/>男
             <input type="radio" name="gender" value="女"/>女
      
     4.多选按钮(name属性必须有,值相同,可以选择多个)
            <input type="checkbox" name="hobby" value="睡觉" checked/>睡觉
            <input type="checkbox" name="hobby" value="吃饭"/>吃饭
            <input type="checkbox" name="hobby" value="打豆豆"/>打豆豆
      
     5.下拉框(name属性必须有,size代表初始显示项数)
       <select name="address">
                        <option value="北京" name="bj">北京</option>
                        <option value="上海" name="sh">上海</option>
                        <option value="南京" name="nj">南京</option>
                        <option value="山东" name="sd" selected>山东</option>
                        <option value="西安" name="xa">西安</option>
                 </select>
       
     6.按钮
      button普通按钮:<input type="button" name="button" value="普通按钮"/>
            reset按钮:(重置表单数据)<input type="reset" name="reset" value="重置按钮"/>
            submit提交按钮:<input type="submit" name="submit" value="提交按钮"/>
            image图像按钮(同样会提交表单数据):<input type="image" src="../image/login.gif" name="image"/>
      
     7.多行文本域<textarea name="textarea" rows="20" cols="50"></textarea>
     
      8.文件域
           <form action="" method="post" enctype="multipart/form-data">
           <input type="file" name="files" />
     
          </form>

        9.email自动验证:  <input type="email" name="email"/>
     
        10.网址自动验证: <input type="url" name="url"/>
          
        11.数字:<input type="number" min="0" max="100" step="5" name="number"/>
          
        12.滑块:<input type="range" name="range" max="20" min="-20" step="10"/>
           
        13.搜索框:<input type="search" name="search"/>
     
    四.表单的高级应用
     
         1.隐藏域(在表单当中不会显示,但是确实存在数据,当提交时会将隐藏用于数据一起提交)
            <input type="hidden" value="666" name="userid">

        2.只读和禁用
            <input name="name" type="text" value="张三"  readonly>
           <input type="submit "  disabled   value="保存" >
       3.标注(光标定位)
          <label for="id">标注的文本</label>
            <input type="radio" name="gender" id="male"/>
      
    五.表单的初级验证
         1.placeholder 友好提示
         2.required  非空
         3..pattern  正则表达式验证
     
     用户名:<input type="text" name="username" placeholder="请输入用户名" required/>
     手机号:<input type="text" name="phone" required pattern="^1[358]d{9}"/>
                <input type="submit" value="提交"/>

  • 相关阅读:
    【STM32F407开发板用户手册】第8章 STM32F407的终极调试组件Event Recorder
    【STM32F429开发板用户手册】第7章 STM32F429下载和调试方法(IAR8)
    【STM32F407开发板用户手册】第7章 STM32F407下载和调试方法(IAR8)
    【STM32F429开发板用户手册】第6章 STM32F429工程模板建立(IAR8)
    【STM32F407开发板用户手册】第6章 STM32F407工程模板建立(IAR8)
    【STM32F429开发板用户手册】第5章 STM32F429下载和调试方法(MDK5)
    【STM32F407开发板用户手册】第5章 STM32F407下载和调试方法(MDK5)
    基于STM32H7,F407,F429的ThreadX内核程序模板,含GCC,MDK和IAR三个版本(2020-06-08)
    【STM32F429开发板用户手册】第4章 STM32F429工程模板建立(MDK5)
    【STM32F407开发板用户手册】第4章 STM32F407工程模板建立(MDK5)
  • 原文地址:https://www.cnblogs.com/liuying23/p/9873046.html
Copyright © 2011-2022 走看看