zoukankan      html  css  js  c++  java
  • Web前端(15)_input表单

    1、label标签

            点击用户名,直接跳到输入框里

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <label >用户名: <input type="text">  </label> <br />
    <label >用户名: <input type="text">  </label> <br />
    <label >用户名: <input type="text">  </label> <br />
    <label >用户名: <input type="text">  </label> <br />
    <label >用户名: <input type="text">  </label> <br />
    
    </body>
    </html>
    View Code

         

    2、for和id结合,不常用

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <label >用户名: <input type="text">  </label> <hr />
    <label for="pwd">
        用户名: <input type="text">
        密码: <input type="password" id="pwd">
    </label>
    </body>
    </html>
    View Code

    3、表单练习

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <base target="_blank_"/>
    </head>
    
    <body>
        <table width="600" border="0" cellpadding="0" cellspacing="0" align="center" >
            <caption><h4>青春不常在,抓紧谈恋爱</h4></caption>
            <tr>
                <td>所在地区</td>
                <td><input type="text"  value="北京"/></td>
            </tr>
            <tr>
                <td>用户名</td>
                <td><input type="text" value="andy" maxlength="8"></td>
            </tr>
    
            <tr>
                <td>密码</td>
                <td><input type="password" value="andy" /></td>
            </tr>
    
              <tr>
                <td>性别</td>
                <td><input type="radio" name="sex" /><input type="radio" name="sex" checked="checked"/>
                </td>
            </tr>
            <!-- 以下是年龄  -->
            <tr height="60">
                <td>年龄</td>
                <td>
                    <select value="" id="1">
                         <option value="">选择年份</option>
                         <option value="">1990</option>
                         <option value="">1991</option>
                         <option value="" selected="selected">1992</option>
                         <option value="">1993</option>
                         <option value="">1998</option>
                    </select>
                    <select value="" id="1">
                         <option value="">选择月份</option>
                         <option value="">1月</option>
                         <option value="">2月</option>
                         <option value="">3月</option>
                         <option value="">6月</option>
                         <option value="">7月</option>
                    </select>
    
                </td>
    
            </tr>
            <tr>
                <td>喜欢的类型</td>
                <td>
                    妩媚 <input type="checkbox" name="girl" />
                    成熟 <input type="checkbox" name="girl" />
                    温柔 <input type="checkbox" name="girl" />
                    小奶狗 <input type="checkbox" name="girl" />
                    大叔 <input type="checkbox" name="girl" />
                </td>
            </tr>
            <tr>
                <td>给我留言</td>
                <td>
                    <textarea name="" id="" cols="50" rows="10">不支持富文本 </textarea>
                </td>
            </tr>
    
            <tr>
                <td></td>
                <td>
                    <input type="button" value="注册">
                    <input type="submit" value="提交">
                    <input type="reset"  value="重置">
                </td>
            </tr>
            <tr>
                <td></td>  <!-- 这个地方空着,不能删-->
                <td>
                    <input type="image" src="../image/QQ截图20190324194537.png">
                </td>
            </tr>
            <tr>
                <td>上传头像</td>
                <td>
                    <input type="file" >
                </td>
            </tr>
        </table>
    </body>
    </html>
    View Code

  • 相关阅读:
    在 Windows 上测试 Redis Cluster的集群填坑笔记
    vmware安装黑苹果教程
    微信支付v3发布到iis时的证书问题
    Linux下安装SQL Server 2016(连接篇SQL Server on linux)
    Linux下安装SQL Server 2016(连接篇SQL Server on linux)
    Linux下安装SQL Server 2016(安装篇SQL Server on linux)
    Linux下安装SQL Server 2016(准备篇SQL Server on linux)
    客服端与服务端APP支付宝支付接口联调的那些坑
    ASP.NET MVC]WebAPI应用支持HTTPS的经验总结
    .net平台下C#socket通信(中)
  • 原文地址:https://www.cnblogs.com/sunnybowen/p/10590805.html
Copyright © 2011-2022 走看看