博主信息
博文 5
粉丝 0
评论 0
访问量 1312
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
html表格及表单的运用
P粉168604607
原创
511人浏览过

直接上代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>表格练习+表单练习</title></head><body>    <!--  1. 写一个课程表, 要求用到行与列的合并  -->    <table border width="400px">        <thead>            <h2>课程表</h2>        </thead>        <tbody>            <tr>                <th>序号</th>                <th>周一</th>                <th>周二</th>                <th>周三</th>                <th>周四</th>                <th>周五</th>            </tr>            <tr>                <td>1</td>                <td rowspan="3">语文</td>                <td>数学</td>                <td>英语</td>                <td>物理</td>                <td>生物</td>            </tr>            <tr>                <td>2</td>                <!-- <td rowspan="3">语文</td> -->                <td>数学</td>                <td>英语</td>                <td>地理</td>                <td>历史</td>            </tr>            <tr>                <td>3</td>                <!-- <td>语文</td> -->                <td>数学</td>                <td>英语</td>                <td>地理</td>                <td>历史</td>            </tr>            <tr>                <td>4</td>                <td>英语</td>                <td>语文</td>                <td>数学</td>                <td>地理</td>                <td>历史</td>            </tr>            <tr>                <td>5</td>                <td>数学</td>                <td>语文</td>                <td>英语</td>                <td>地理</td>                <td>历史</td>            </tr>        </tbody>        <tfoot>            <tr>                <td>6</td>                <td colspan="5">备注:具体执行过程中,可根据实际情况调整</td>            </tr>        </tfoot>    </table>    <hr>    <hr>    <!-- 2. 写一个注册表单,尽量用到课堂上提及的所有控件 -->    <form>        <fieldset>        <legend>用户注册</legend>        <div>            <label for="username">用户名:</label>            <input type="text" name="username" id="username" placeholder="username">        </div>        <div>            <label for="pwd">密&nbsp&nbsp&nbsp码:</label>            <input type="password" name="pwd" id="pwd" placeholder="password">        </div>        <div>            <label for="email">邮&nbsp&nbsp&nbsp箱:</label>            <input type="email" name="email" id="email" placeholder="XXX@XX.com">        </div>        <div>            <label for="man">性&nbsp&nbsp&nbsp别:</label>            <input type="radio" name="man" id="man"><label for="man">男</label>            <input type="radio" name="man" id="girl"><label for="girl">女</label>        </div>        <div><label for="aihao[]">爱&nbsp&nbsp好:</label>            <input type="checkbox" name="aihao[]" id="yundong"><label for="yundong">运动</label>            <input type="checkbox" name="aihao[]" id="tingge"><label for="tingge">听歌</label>            <input type="checkbox" name="aihao[]" id="kandianying"><label for="kandianying">看电影</label>        </div>        <div>            <label for="photo">照片:</label>            <input type="file" name="photo" id="photo">        </div>        <div>            <label for="color">颜色:</label>            <input type="color" name="color" id="color">        </div>        <div>            <label for="date">出生日期:</label><input type="date" name="date" id="date">        </div>        <div>            <label for="edu">籍贯:</label>            <select name="deu" id="">籍贯:            <optgroup label="北方">                <option value="henan">河南</option>                <option value="henan">河北</option>                <option value="henan">山东</option>                <option value="henan">辽宁</option>            </optgroup>            <optgroup label="南方">                <option value="henan">广东</option>                <option value="henan">广西</option>                <option value="henan">湖南</option>                <option value="henan">湖北</option>            </optgroup>        </select>        </div>        <button type="submit">提交</button>        <button type="reset">重置</button>    </fieldset>    </form></body></html>

以上代码的效果

没用CSS修饰的表单

本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学