码迷,mamicode.com
首页 > Web开发 > 详细

HTML-form表单

时间:2017-03-06 12:26:12      阅读:256      评论:0      收藏:0      [点我收藏+]

标签:方式   pass   submit   add   tar   乒乓球   option   tle   链接   

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>table</title>
    <style>
        table{
            border-collapse: collapse;
        }
        tr{
            border: 1px solid red;
        }
        td{
            border: 1px dashed blue;
        }
    </style>
</head>
<body>
<table border="1">
    <tr>
        <!--colspan横向合并列-->
        <td colspan="2">1-1</td>
        <td>1-2</td>
        <!--<td>1-3</td>-->
    </tr>
    <tr>
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>
    <tr>
        <!--<td>3-1</td>-->
        <td>3-2</td>
        <td>3-3</td>
    </tr>
</table>

<hr/>

<table>
    <tr>
        <td colspan="4" align="right">123</td>
    </tr>
    <tr>
        <td>AC</td>
        <td>+/-</td>
        <td>%</td>
        <td>/</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>x</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>-</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>+</td>
    </tr>
    <tr>
        <td colspan="2">0</td>
        <td>.</td>
        <td>=</td>
    </tr>
</table>

<hr/>

<!--cellspacing 列与列之间 单元格间距 cellpadding 单元格内边距-->
<table border="1" cellspacing="10" cellpadding="5">
    <!--caption表名 标题-->
    <caption>XX公司人员</caption>
    <tr>
        <!--th表头-->
        <th>姓名</th>
        <th>性别</th>
        <th>职位</th>
        <th>备注</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>男</td>
        <td>小卖部</td>
        <td> </td>
    </tr>
    <tr>
        <td>李四</td>
        <td>男</td>
        <td>保洁</td>
        <td> </td>
    </tr>
</table>


<!--action 链接外部路径、地址 method 提交方式 get post   disabled禁用   autofocus自动获取焦点-->
<form action="#" method="get">
    <!--文本框-->
    账号:<input type="text" placeholder="请输入账号" name="username" disabled/>
    密码:<input type="password" maxlength="6" name="userPassword" autofocus/>
    <!--按钮 不会发起提交-->
    <input type="button" value="点击我1"/>

    <input type="submit"/>
    <button>点击我可以提交</button>

    <!--多选-->
    篮球 <input type="checkbox" class="cb1"/>
    足球 <input type="checkbox" class="cb1"/>
    乒乓球 <input type="checkbox" class="cb1"/>
    网球 <input type="checkbox" class="cb1"/>

    同意 <input type="checkbox" checked="checked"/>
    拒绝 <input type="checkbox"/>

    <!--单选 name值自定义-->
    男 <input type="radio" name="sex"/>
    女 <input type="radio" name="sex"/>

    <!--重置-->
    <input type="reset"/>


    <!--下拉框 下拉列表-->
    <select name="" id="" class="">
        <option value="bj">北京</option>
        <option value="dj">东京</option>
        <option value="nj">南京</option>
        <option value="xj">西京</option>
    </select>
    
    <!--多行文本框-->
    <textarea name="" id="" cols="30" rows="10"></textarea>
    
    <!--数字-->
    <input type="number" min="0" max="10"/>
    <input type="email"/>
    <input type="color"/>

    <label for="man">男</label>
    <input type="radio" name="sex" id="man"/>

    <label for="woman"> 女</label>
    <input type="radio" name="sex" id="woman"/>
</form>



</body>
</html>

HTML-form表单

标签:方式   pass   submit   add   tar   乒乓球   option   tle   链接   

原文地址:http://www.cnblogs.com/wylbgp/p/6508636.html

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