2021-07-09-web作业

最新推荐文章于 2023-02-15 17:57:14 发布

阿肆5

最新推荐文章于 2023-02-15 17:57:14 发布

阅读量143

点赞数

文章标签： html

本文链接：https://blog.csdn.net/tubulvxing1/article/details/118632693

版权

这是一个关于HTML和CSS的实践案例，展示了一个包含个人信息填写的表单设计，使用表格布局并用CSS进行美化。表单包括性别选择、生日选择、校区输入、婚姻状况、学历、月薪、手机号、昵称、喜好类型选择及自我介绍等字段，还有同意条款的选项和登录链接。设计中考虑了表单元素的对齐和交互体验，适合前端学习者参考。

摘要由CSDN通过智能技术生成

web前端作业：表单练习-相识相知，就在真爱页面
我是表单里面嵌套表格，因为表单元素需要设置css样式使其中的控件进行对齐，表格的话就不用这么麻烦，算是偷懒吧。写的一般，只供借鉴。

<!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">
    <style type="text/css">
		table{
			margin: 0 auto;
		}
        textarea{
            resize: none;
        }
	</style>
	<title>表单练习</title>
</head>
<body>
    <form action="#" method="GET">
        <table width="600" border="0" cellpadding="10">
            <thead>
                <tr>
                    <th colspan="2"><h3>相识相知，就在真爱</h3></th>
                </tr>
            </thead>
           <tbody>
            <tr>
                <td width="80">性别</td>
                <td width="450"><input type="radio" name="gender" value="male"><input type="image" src="img/man.jpg">男<input type="radio" name="gender" value="fmale"><input type="image" src="img/women.jpg">女</td>
            </tr>
            <tr>
                <td>生日</td>
                <td><select>
                    <option value="请选择年">请选择年</option>
                    <option>1998</option>
                    </select>
                    <select>
                        <option value="请选择月">请选择月</option>
                        <option >10</option>
                    </select>
                        <select>
                        <option value="请选择日">请选择日</option>
                        <option >22</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td><label for="sch">所在校区</label></td>
                <td><input type="text" name="school" id="sch"></td>
            </tr>
            <tr>
                <td>婚姻状况</td>
                <td><input type="radio" name="wei">未婚<input type="radio" name="wei">离婚<input type="radio" name="wei">丧偶</td>
            </tr>
            <tr>
                <td><label for="xue">学历</label></td>
                <td><input type="text" name="xl" id="xue"></td>
            </tr>
            <tr>
                <td><label for="ic">月薪</label></td>
                <td><input type="text" name="income" id="ic"></td>
            </tr>
            <tr>
                <td><label for="phone">手机号</label></td>
                <td><input type="number" name="phone" id="phone"></td>
            </tr>
            <tr>
                <td><label for="nc">昵称</label></td>
                <td><input type="text" name="nc" id="nc"></td>
            </tr>
            <tr>
                <td>喜欢的类型</td>
                <td>
                    <input type="checkbox" name="habit" value="妩媚">妩媚
                    <input type="checkbox" name="habit" value="柔美">柔美
                    <input type="checkbox" name="habit" value="可爱">可爱
                    <input type="checkbox" name="habit" value="小鲜肉">小鲜肉
                    <input type="checkbox" name="habit" value="型男">型男
                    <input type="checkbox" name="habit" value="气质">气质
                </td>
            </tr>
            <tr>
                <td><label for="ziwo">自我介绍</label></td>
                <td><textarea rows="25" cols="31" id="ziwo" name="ziwojieshao"></textarea></td>
            </tr>
            <tr>
                <td></td>
                <td><input type="image" src="img/btn.png"></td>
            </tr>
            <tr>
                <td></td>
                <td><input type="checkbox">我同意注册条款和会员标准</td>
            </tr>
            <tr>
                <td></td>
                <td colspan="2"><a href="登录.html">我是会员？立即登录</a></td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <dl>
                        <dt><h3>我承诺</h3></dt>
                        <dd><li>年满18岁，单身</li></dd>
                        <dd><li>抱着严肃的态度</li></dd>
                        <dd><li>真诚寻找另一半</li></dd>
                    </dl>
                </td>
            </tr>
           </tbody>
        </table>
    </form>
</body>
</html>

运行结果：在这里插入图片描述

阿肆5

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
2021-07-09-web作业

web前端作业：表单练习-相识相知，就在真爱页面我是表单里面嵌套表格，因为表单元素需要设置css样式使其中的控件进行对齐，表格的话就不用这么麻烦，算是偷懒吧。写的一般，只供借鉴。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <me
复制链接

扫一扫