码迷,mamicode.com
首页 > 其他好文 > 详细

表单常见功能补全(代码+注释)

时间:2015-11-17 11:08:05      阅读:361      评论:0      收藏:0      [点我收藏+]

标签:html

<html>

      <head>

         <title>表单</title>

      </head>

      <body>

      <form method="post" enctype="multipart/form-data" >

      <table border="1" align="center">

      <caption>请填写以下内容</caption><!-- 注意位置 -->

       <tr>

        <th>用户名</th>

        <td><input type="text" size="30" maxlength="10" value="username"></td><!-- maxlength限定文本长度 value值表示初始值 -->

      </tr>

      <tr>

        <th>密码</th>

        <td><input type="password" size="30" maxlength="10" value="123456"></td><!-- maxlength限定密码长度 value值表示初始值 -->

      </tr>

      <tr>

      <th>爱好</th> <!-- 复选框 -->

      <td>

      <input type="checkbox" checked >玩游戏 <!-- checked表示默认被选中 -->

      <input type="checkbox">听音乐

      <input type="checkbox">运动

      <input type="checkbox" checked >睡觉 <!-- checked表示默认被选中 -->

      </td>

      </tr>

      <tr>

      <th>性别</th> <!-- 单选框 --><!-- 单选框中必须要有组名否则不能被选中,如下列将name值设为sex -->

      <td>

      <input type="radio" checked name="sex">男 <!-- checked表示默认被选中 -->

      <input type="radio" name="sex" >女

      <input type="radio" name="sex" >保密

      </td>

      </tr>

      <tr>

      <th>上传文件</th><!-- 两点注意:1.method="post" 2.enctype="multipart/form-data" -->

      <td>

      <input type="file" name="picture">

      </td>

      </tr>

      <tr>

      <th>下拉列表</th>

      <td>

      <select name="">

      <option selected >--请选择--</option><!-- slected表示默认被选择 -->

      <option value="1" >1</option><!-- 加value值提交就是提交value的值,不加就是提交两个option之间的元素 -->

      <option>2</option>

      <option>3</option>

      <option>4</option>

      </select>

      </td>

      </tr>

      <tr>

      <th>列表</th>

      <td>

      <select name="" size="3"><!-- size值表示显示的数目 看不见的部分用滚动条下拉 -->

      <option selected >0</option><!-- slected表示默认被选择 -->

      <option>1</option>

      <option>2</option>

      <option>3</option>

      <option>4</option>

      <option>5</option>

      </select>

      </td>

      </tr>

      <tr>

      <th>多选列表</th>

      <td>

      <select name="" size="3" multiple ><!-- size值表示显示的数目看不见的部分用滚动条下拉,按ctrl或shift进行多选 -->

      <option>0</option>

      <option selected >1</option><!-- slected表示默认被选择 -->

      <option>2</option>

      <option selected >3</option><!-- slected表示默认被选择 -->

      <option>4</option>

      <option>5</option>

      </select>

      </td>

      </tr>

      <tr>

      <th>多行文本域</th>

      <td>

      <textarea cols="40" rows="6" name="">在这里输入个人简介</textarea>

      </td>

      </tr>

      <tr>

      <td colspan="2" align="center"><input type="submit" value="提交"><input type="reset"></td><!-- value值表示按钮显示内容 -->

      </tr>

      </table>

      </form>

      </body>


</html>


表单常见功能补全(代码+注释)

标签:html

原文地址:http://10846995.blog.51cto.com/10836995/1713343

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!