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

表格及表单

时间:2019-12-07 19:34:52      阅读:74      评论:0      收藏:0      [点我收藏+]

标签:radio   lsp   推荐   enter   热门   文本域   方式   lang   disable   

一.列表:

1.无序列表:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h3>热门活动&nbsp;&nbsp;&nbsp;更多</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>热门活动&nbsp;&nbsp;&nbsp;更多</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>

 

 

 

 

表格及表单

标签:radio   lsp   推荐   enter   热门   文本域   方式   lang   disable   

原文地址:https://www.cnblogs.com/Aaron-Feng/p/12002994.html

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