zoukankan      html  css  js  c++  java
  • 表单表格练习

    做出上面的表格:

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title></title>
    </head>
    <body>
      <h1 align="center">欢迎注册尚学堂成员</h1><hr />
      <form action="" method="post" enctype="multipart/form-data">
        <table width="500" align="center">
          <tr>
            <td>用户名:</td>
            <td><input type="text" name="" id="name" value="" /></td>
          </tr>
          <tr>
            <td>密码:</td>
            <td>
            <input type="password" name="" id="pwd" value="" />
            </td>
          </tr>
          <tr>
            <td>确认密码:</td>
            <td>
              <input type="password" name="" id="" value="" />
            </td>
          </tr>
          <tr>
            <td>请选择城市市:</td>
            <td>
              <select name="">
                <option value="" selected="selected">北京</option>
                <option value="">上海</option>
              </select>
            </td>
          </tr>
          <tr>
            <td>请选择性别:</td>
            <td>
              <label for="boy">男<input type="radio" name="sex" id="boy" value="" /></label>
              <label for="girl">女<input type="radio" name="sex" id="girl" value="" /></label>
              <label for="buhaoshuo">不好说<input type="radio" name="sex" id="buhaoshuo" value="" /></label>
            </td>
          </tr>
          <tr>
            <td>请选择职业:</td>
            <td>
              <label for="student">学生</label><input type="radio" name="zhiye" id="student" value="" />
              <label for="teacher">老师</label><input type="radio" name="zhiye" id="teacher" value="" />
              <label for="qita">其他</label><input type="radio" name="zhiye" id="qita" value="" />
            </td>
          </tr>
          <tr>
            <td>请选择爱好:</td>
            <td>
              <fieldset id="hobby">
                <legend>你的爱好</legend>
                <label for="basketball">打篮球</label><input type="checkbox" name="hobby" id="basketball" value="" />
                <label for="run">跑步</label><input type="checkbox" name="hobby" id="run" value="" />
                <label for="reading">阅读</label><input type="checkbox" name="hobby" id="reading" value="" />
                <label for="play">上网</label><input type="checkbox" name="hobby" id="play" value="" /><td>
                </fieldset>
            </td>
          </tr>
          <tr>
            <td>备注:</td>
            <td>
              <textarea placeholder="这里是备注内容" name="" rows="" cols=""></textarea>
            </td>
          </tr>
          <tr>
            <td></td>
            <td align="left">
              <input type="submit" name="" id="" value="提交" />
              <input type="reset" name="" id="" value="重置" />
            </td>
          </tr>
        </table>
      </form>
    </body>
    </html>

    做出如下:

    注意次例题的表格应用(td)怎么对齐的,做的时候找了老半天。

    把他们看成整个表格分两块内容就对齐了。

  • 相关阅读:
    TestNG 入门教程
    Angularjs中文版本开发指南发布
    你是码农 还是优秀程序员?
    java牛人给新人的几点建议
    有一种毒药叫励志书
    牛人眼中如何精通spring?
    驯服你的Windows Server 2003
    windows 7 里面的iis在哪里
    神器 cmder
    亚信UED前端流程自动化构建工具
  • 原文地址:https://www.cnblogs.com/1111duguxiaoyu/p/6140777.html
Copyright © 2011-2022 走看看