zoukankan      html  css  js  c++  java
  • html表单的各种输入控件

    表单的输入控件主要是input和select。其中input可以是多种类型,通过type属性来进行定义,type可以取值是text,radio,checkbox,password,submit,reset.

    select是和option组合使用的。后台要想获得表单的值,是通过name属性的值来获得用户的输入。

    后台获取的值:

    input-text-name

    input-redio-name-value

    input-checkbox-name-value

    input-password-name

    input-textarea-name

    select-option-name-value

    下面是综合应用这些组成一个注册表单。

    <!DOCTYPE HTML>
    <html>
    <head>
     <meta charset="utf-8">
     <title></title>
    
    </head>
    <body>
     <center>
      <h1 style="color:blue;">注册表单</h1>
      <hr/>
      <form name="reg" action="regsuccess.html" method="post">
    
      <table cellspacing="0" cellpadding="0" border="0">
       <tr>
        <td>用户名:</td>
        <td><input type="text" name="username"/></td>
       </tr>
       <tr>
        <td>密码:</td>
        <td><input type="password" name="pwd"/></td>
       </tr>
       <tr>
        <td>确认密码:</td>
        <td><input type="password" name="confirmpwd"/></td>
       </tr>
       <tr>
        <td>电子邮箱:</td>
        <td><input type="text" name="email"/></td>
       </tr>
       <tr>
        <td>性别:</td>
        <td><input type="radio" name="gender" value='1' checked/>男<input type="radio" name="gender" value='0'/>女</td>
       </tr>
       <tr>
        <td>学历:</td>
        <td>
         <select name="edulevel"/>
          <option value="-1">--请选择学历--</option>
          <option value="0">小学</option>
          <option value="1">初中</option>
          <option value="2">高中</option>
          <option value="3">学士</option>
          <option value="4">硕士</option>
          <option value="5">博士</option>
          <option value="6">博士后</option>
        </td>
       </tr>
       <tr>
        <td>爱好:</td>
        <td>
         <input type="checkbox" name="hoby" value="reading"/>读书
         <input type="checkbox" name="hoby" value="movie"/>电影
         <input type="checkbox" name="hoby" value="shopping"/>购物
         <input type="checkbox" name="hoby" value="internet"/>上网
         <input type="checkbox" name="hoby" value="other"/>其他
        </td>
       </tr>
       <tr>
        <td>上传头像:</td>
        <td><input type="file"/></td>
       </tr>
       <tr>
        <td>服务协议:</td>
        <td><textarea rows="10" cols="40">rule 1</textarea></td>
       </tr>
       <tr>
        <td>是否接受协议:</td>
        <td><input type="checkbox"name='rule'value='accept'/>接受</td>
       </tr>
       <tr>
        <td colspan="2" align="center"><input type="submit" value="注册">
        <input type="reset" value="重置"/></td>
       </tr>
    
      </table>
    
      </form>
     </center>
    </body>
    </html>

    显示效果如下:

  • 相关阅读:
    616无趣
    安装elasticsearch的问题
    导出PDF数据
    生活本苦,奈何年华
    分享一个sql查询重复记录
    springboot的java打印票据-4
    springboot的java打印票据-3
    springboot的java打印票据-2
    react 学习笔记
    原生可拖动表格
  • 原文地址:https://www.cnblogs.com/zhaopengcheng/p/5513102.html
Copyright © 2011-2022 走看看