首页 > 代码库 > HTML-form表单

HTML-form表单

2024-09-07 02:12:43   216人阅读

<!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="http://www.mamicode.com/点击我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="http://www.mamicode.com/bj">北京</option>
        <option value="http://www.mamicode.com/dj">东京</option>
        <option value="http://www.mamicode.com/nj">南京</option>
        <option value="http://www.mamicode.com/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表单


联系
我们