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)怎么对齐的,做的时候找了老半天。

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

  • 相关阅读:
    oAuth 认证
    Javascript事件循环机制 浅尝手记
    Javascript闭包与作用域this
    SASS笔记
    FragmentActivity和Activity的区别及何时使用两者
    在fragment中获取Application数据
    Android中得到view在父容器中的位置下标
    设置android模拟器每次启动都按一定比例显示
    eclipse 导入web项目包
    拷贝Eclipse Workspace的设置
  • 原文地址:https://www.cnblogs.com/1111duguxiaoyu/p/6140777.html
Copyright © 2011-2022 走看看