【Web前端基础】实验9 表单页面设计-Toy模板网

这篇具有很好参考价值的文章主要介绍了【Web前端基础】实验9 表单页面设计。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

项目1 参会注册表

页面效果图：

【Web前端基础】实验9 表单页面设计

要求：

设计参会注册表页面。

HTML代码：

<!DOCTYPE html>
<html lang='en'>
    <head>
    <meta charset="UTF-8">
    <title>参会注册表</title>
    <style type="text/css">
    body{
     text-align: center;}
    h1{
     
        font-size: 25px;
        text-align: center;
    }
    .zhuce{
     
        font-size: 14px;
        text-align: center;
        width: 550px;
        margin: 0 auto;
        background: #f7f7f7;
    }
    .zhuce td{
     
        border: 1px solid #b4b4b4;
        padding:2px 3px;

    }
    .zhuce .ibg{
     
        text-align: left;
    }
    .zhuce .bbg{
     
        padding: 10px 0;
        font-size: 10px;
        }

    #bt{
     
        width: 40px;
        height: 28px;
       
    }
    </style>
</head>
<body>
    <h1>参会注册表</h1>
    <form>
        <table class="zhuce">
            <tr>
                <td colspan="4" class="ibg">姓名：
                    <input name="txtName" type="text" >
                </td>
                
                <td colspan="4" class="ibg">单位：
                    <input name="txtzhiwu" type="text" size="22">
                </td>
            </tr>
            <tr>
           
            <td colspan="4" class="ibg">性别：
                <input type="radio" name="sex" value="male"/>男
                <input type="radio" name="sex" value="female"/>女
            </td>
          
            <td colspan="4" class="ibg">手机：
                <input name="txtshouji" type="text" size="10">
            </td>
        </tr>
        <tr>
            <td colspan="4" class="ibg">酒店：
                <input type="radio" name="res" value="tianshan"/>天山大酒店
                <input type="radio" name="res" value="kunlun"/>昆仑饭店
            </td>
            <td  class="ibg">预定酒店数： 
                <input name="txtfangjianshu" type="text" size="1">套
            </td>
        </tr>
        <tr>
            <td colspan="9" class="ibg">
                房间类型：
                <input type="radio" name="leixing" value="danren"/>单人间（320元)
                <input type="radio" name="leixing" value="shuangren"/>标准双人间（380元）
                <input type="radio" name="leixing" value="jiating"/>家庭套间（450元）
            </td>
        </tr>
        <tr>
            <td colspan="9" class="bbg">
                <input id="bt" type="submit" name="btnOk" value="提交">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input id="bt" type="reset" ><br><br>
            </td>
        </tr>
        </table>
    </form>
</body>
</html>

项目2 设计科技工作者建言页面

页面效果图：

【Web前端基础】实验9 表单页面设计

要求：

采用DIV、表格混合布局设计“留言板”页面。
其它两行的内容如下所示：
注：如果您的留言不便公开，请选择"保密"选项，提交后可凭系统反馈给您的留言编号、查询密码和您的姓名查询回复。
请遵守国家有关法律、法规，尊重网上道德，承担一切因您的行为而直接或间接引起的法律责任。
本网站拥有管理笔名和留言的一切权利。文章来源地址https://www.toymoban.com/news/detail-465337.html

HTML代码：

<!DOCTYPE html>
<html lang='en'>
    <head>

到了这里，关于【Web前端基础】实验9 表单页面设计的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

【Web前端基础】实验9 表单页面设计

项目1 参会注册表

页面效果图：

要求：

HTML代码：

项目2 设计科技工作者建言页面

页面效果图：

要求：

HTML代码：

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

支付宝扫一扫领取红包，优惠每天领

二维码1

二维码2