表格及表单
Posted aaron-feng
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了表格及表单相关的知识，希望对你有一定的参考价值。
一.列表：
1.无序列表：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h3>热门活动 更多</h3> <ul> <li> <img src="image/img1.png" alt=""> <p>推荐活动 | |原创音乐现金榜T榜|</p> </li> <li> <img src="image/img2.png" alt=""> <p>推荐节目|《TAImusic》爆笑来袭</p> </li> <li> <img src="image/img3.png" alt=""> <p>推荐歌单 | 继续宠爱张国荣</p> </li> <li> <img src="image/img4.png" alt=""> <p>推荐活动| 330金属音乐巡演 成都小酒馆音乐空间</p> </li> </ul> </body> </html>
2.定义列表：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <dl> <dt> 热门活动 </dt> <dd> <p>推荐节目|《TAImusic》爆笑来袭</p> </dd> <dd> <img src="image/img3.png" alt=""> <p>推荐歌单 | 继续宠爱张国荣</p> </dd> <dd> <img src="image/img4.png" alt=""> <p>推荐活动| 330金属音乐巡演 成都小酒馆音乐空间</p> </dd> </dl> </body> </html>
3.有序列表：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h3>热门活动 更多</h3> <ol> <li> <img src="image/img1.png" alt=""> <p>推荐活动 | |原创音乐现金榜T榜|</p> </li> <li> <img src="image/img2.png" alt=""> <p>推荐节目|《TAImusic》爆笑来袭</p> </li> <li> <img src="image/img3.png" alt=""> <p>推荐歌单 | 继续宠爱张国荣</p> </li> <li> <img src="image/img4.png" alt=""> <p>推荐活动| 330金属音乐巡演 成都小酒馆音乐空间</p> </li> </ol> </body> </html>
二.表格
1.跨行：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border="2"> <tr> <th>总页面流量</th> <th>共计来访</th> <th>会员</th> <th>游客</th> </tr> <tr>
<td>9756488</td> <td>97656</td> <td>7538087</td> <td>568787</td> </tr> <tr> <td>46776686</td> <td>85544</td> <td>69357</td> <td>568787</td> </tr> <tr> <td>7538087</td> <td>546774</td> <td>476897</td> <td>334545</td> </tr> <tr> <td>平均每人浏览</td> <td colspan="3">1.58</td> </tr> </table> </body> </html>
2.跨列：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border="2"> <tr> <th>总页面流量</th> <th>共计来访</th> <th>会员</th> <th>游客</th> </tr> <tr> <td rowspan="2">9756488</td> <td>97656</td> <td>7538087</td> <td>568787</td> </tr> <tr> <td>46776686</td> <td>85544</td> <td>69357</td> <td>568787</td> </tr> <tr> <td>7538087</td> <td>546774</td> <td>476897</td> <td>334545</td> </tr> <tr> <td>平均每人浏览</td> <td colspan="3">1.58</td> </tr> </table> </body> </html>
3.表格对齐：align:left/center/fight;
单元格内容水平对齐：align:left/center/fight;
单元格垂直对齐：valign: top/center/middle/bottom;
三.表单：
1.基本语法：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form method="post" action="result.html"> <p>名字：<input name="name" type="text" size="21" maxlength="15"/></p> <p>密码：<input name="pass" type="password"/></p> <p> <input type="submit" name="Button" value="提交"/> <input type="reset" name="Reset" value="重填 "/> </p> </form> </body> </html>
action="result.html"表示文件提交位置，method="post/get":post方式提交不会显示密码，更安全。 size="21"表示文本框长度30，maxlength="15"表示允许最多输入15个字符
1.单选按钮：radio用于相互排斥的一组值，只能选一个
<form method="post" action=""> 性别： <input name="gen" type="radio" class="input" value="男"/>男 <input name="gen" type="radio" class="input" value="女"/>女 </form>
2.复选框：checkbox类似于单选按钮，只不过它能同时多选
<form method="post" action=""> 性别： <input name="interest" type="checkbox" value="sport"/>运动 <input name="interest" type="checkbox" value="talk"/>聊天 <input name="interest" type="checkbox" value="play"/>玩游戏 </form>
3.按钮butoon和提交按钮submit及重置按钮reset
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form method="post" action=""> <p>用户名：<input name="name" type="text"/></p> <p>密码：<input name="pass" type="password"/></p> <p> <input name="butReset" type="reset" value="按钮"> <input name="butSubmit" type="submit" value="按钮"> <input name="butButton" type="button" value="按钮"> </p> </form> </body> </html>
4.下拉列表框：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <img src="素材/image/renren_titile.gif" alt=""> <p> 人人网，中国 <strong>最真实、最有效</strong>的社会平台，加入 <br/>人人网，找回老朋友，结交新朋友。 </p> <form action="#" method="post"> <p> <label for="aa">电子邮箱:</label> <input name="youxaing" type="text" id="aa"> </p> <p> <label for="ab">设置密码: </label><input name="pass" type="password" id="ab"> </p> <p> <label for="ac">真实姓名: </label><input name="name" type="text" id="ac"> </p> <p> 性别：<input name="gen" type="radio" value="男" class="input" id="bb"><label for="bb">男</label> <input name="gen" type="radio" value="女" class="input" id="cc"><label for="cc">女</label> </p> <p> 生日： <select name="year" id="aq"> <option value="1991">1991年</option> <option value="19922">1992年</option> <option value="1993">1993年</option> </select><label for="aq">年</label> <select name="mon"> <option value="1">11</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">1</option> <option value="12">12</option> </select>月 <select name="year"> <option value="1">1</option> <option value="22">22</option> <option value="13">13</option> </select>日 </p> <p> 我现在：<select name="shenfen" > <option value="#">请选择身份</option> <option value="">中国居民</option> <option value="">外籍人士</option> </select>(非常重要) </p> <p> <img src="素材/image/renren_code.gif" alt=""> <a href="#">看不清换一张？</a> </p> <p> <label for="pp">验证: </label><input name="pass" type="password" id="pp"> </p> <input type="image" src="素材/image/renren.gif"> </form> </body> </html>
5.图片按钮：<input type="image" src="../image/.."/>
6.多行文本域：textarea ， cols="30表示30列， rows="10"表示10行
</form> <form method="post" action=""> <h4>填写评价</h4> <p><textarea name="textarea" cols="30" rows="10"></textarea></p> </form>
7.表单的只读和禁用：readonly表示只能看，disabled表示禁用
<form method="get" action=""> <p>用户名：<input name="name" type="text"value="zhangsan"readonly/></p> <p>密码：<input name="pass" type="password"/></p> <p><input type="submit" value="修改" disabled/></p> </form>
8.表单隐藏域：type="hidden"表示创建了一个隐藏域
<form method="get" action=""> <p>用户名：<input name="name" type="text"/></p> <p>密码：<input name="pass" type="password"/></p> <p><input type="hidden" value="666" name="userid"/></p> </form>
以上是关于表格及表单的主要内容，如果未能解决你的问题，请参考以下文章