谈恋爱调查表（表单案例）

橘子海326

于 2024-09-30 21:35:51 发布

阅读量274

点赞数 13

文章标签：前端 html5 chrome vscode visual studio code

本文链接：https://blog.csdn.net/2402_86247394/article/details/142662827

版权

根据我们上一篇学习的表单知识点，做一个综合性练习。

作出如图的表单样式，先是一个表格样式，创建标签作为表头，和空连接的创建，这就用到了之前学过的表格的知识论了。剩下的差不多就是表单元素、属性的应用。

先观察一下这个页面的布局，这脑袋里先有一个框架布局，思路先写什么，都用什么元素。

自己先照着图片自己做一下，看一下效果，了解如何布局，再看下面的解析。

页面效果：

步骤操作：

1、先给到表单元素form，再给表格元素，标题用<h1>，表格的大小。

 <form action="" method="get">
    <h1>青春不常在，抓紧谈恋爱</h1>
    <table border="1">
        <colgroup>
            <col width="100">
            <col width="600">
        </colgroup>

2、就在表格里面写入表单元素，性别的单选框，回想一下

       <tr>
            <th>性别</th>
            <td>
                <label>男</label>
                <input type="radio">
                <label>女</label>
                <input type="radio">
           
            </td>
        </tr>

3、三个日期的下拉选项，用到select，option

  <tr>
            <th>生日</th>
            <td>
                <select >
                    <option value="year">--请选择年份--</option>
                    <option value="year">2001</option>
                    <option value="year">2002</option>
                    <option value="year">2003</option>
                    <option value="year">2004</option>
                </select>
           
                <select>
                    <option value="year">--请选择月份--</option>
                    <option value="year">1</option>
                    <option value="year">2</option>
                    <option value="year">3</option>
                    <option value="year">4</option>
                    <option value="year">5</option>
                    <option value="year">6</option>
                    <option value="year">7</option>
                    <option value="year">8</option>
                    <option value="year">9</option>
                </select>
                <select>
                    <option value="year">--请选择日期--</option>
                    <option value="year">1</option>
                    <option value="year">2</option>
                    <option value="year">3</option>
                    <option value="year">4</option>
                    <option value="year">5</option>
                    <option value="year">6</option>
                    <option value="year">7</option>
                    <option value="year">8</option>
                    <option value="year">9</option>
                </select>
            </td>
        </tr>

4、就是一个输入框，给一个提示文本

 <tr>
            <th>所在地区</th>
            <th align="left">
           
                <input type="text" placeholder="北京思密达"> 
            </th>
        </tr>

5、这个就是和上面的原理一样，单选框，文本框

 <tr>
            <th>
                婚姻状况
            </th>
            <td>
                <label>未婚</label>
                <input type="radio">
                <label>已婚</label>
                <input type="radio">
                <label>离婚</label>
                <input type="radio">
            </td>
        </tr>
        <tr>
            <th>学历</th>
            <td align="left">
                <input type="text" placeholder="幼儿园"> 
            </td>
        </tr>
        <tr>
            <th>月薪</th>
            <th align="left">
                <input type="text" placeholder="10000-20000"> 
            </th>
        </tr>
        <tr>
            <th>手机号码</th>
            <th align="left">
                <input type="number"> 
            </th>
        </tr>
        <tr>
            <th>所在地区</th>
            <th align="left">
                <input type="text"> 
            </th>
        </tr>

6、这个是一个复选框

 <tr>
            <th>喜欢的类型</th>
            <th align="left">
                <input type="checkbox" id="checkbox1" name="checkbox" value="复选框">可爱的
                <input type="checkbox" id="checkbox2" name="checkbox" value="复选框">小鲜肉
                <input type="checkbox" id="checkbox3" name="checkbox" value="复选框">老腊肉

            </th>
        </tr>

7、多行文本的输入，用到了我们的textarea标签，cols=“每行中的字符数” ，rows=“显

示的行数”。下面就是个注册的按钮。

 <tr>
            <th>自我介绍</th>
            <th align="left">
            <textarea name="showText" cols="20" rows="2"></textarea>
            </th>
        </tr>
        <tr>
            <th></th>
            <th align="left">
            <input type="submit" value="免费注册" >
            </th>
        </tr>

8、这就是一个单选，下面是一个空连接的使用，做这的时候为了便利就不给到具体的网页链接，用空链接代替。最后是无序列表的使用。

 <tr>
            <th></th>
            <th align="left">
            <input type="radio">
            <label>我同意注册条款和会员加入标准</label>
            </th>
        </tr>
        <tr>
            <th></th>
            <th align="left"><a href="#" >我是会员</a>
            <a href="#" >立即登录</a>
            <a href="#" >前往修改页面</a></th>
        </tr>
        <tr>
            <th></th>
            <th align="left">
                <h2>我承诺</h2>
                
                <ul>
                    <li>年满18岁、单身</li>
                    <li>抱着严肃的态度</li>
                    <li>真诚寻找另一半</li>
                </ul>
            </th>
        </tr>

全部代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="" method="get">
    <h1>青春不常在，抓紧谈恋爱</h1>
    <table border="1">
        <colgroup>
            <col width="100">
            <col width="600">
        </colgroup>
        <tr>
            <th>性别</th>
          
            <td>
                <label>男</label>
                <input type="radio">
                <label>女</label>
                <input type="radio">
           
            </td>
        </tr>
        <tr>
            <th>生日</th>
            <td>
                <select >
                    <option value="year">--请选择年份--</option>
                    <option value="year">2001</option>
                    <option value="year">2002</option>
                    <option value="year">2003</option>
                    <option value="year">2004</option>
                </select>
           
                <select>
                    <option value="year">--请选择月份--</option>
                    <option value="year">1</option>
                    <option value="year">2</option>
                    <option value="year">3</option>
                    <option value="year">4</option>
                    <option value="year">5</option>
                    <option value="year">6</option>
                    <option value="year">7</option>
                    <option value="year">8</option>
                    <option value="year">9</option>
                </select>
                <select>
                    <option value="year">--请选择日期--</option>
                    <option value="year">1</option>
                    <option value="year">2</option>
                    <option value="year">3</option>
                    <option value="year">4</option>
                    <option value="year">5</option>
                    <option value="year">6</option>
                    <option value="year">7</option>
                    <option value="year">8</option>
                    <option value="year">9</option>
                </select>
            </td>
        </tr>
        <tr>
            <th>所在地区</th>
            <th align="left">
           
                <input type="text" placeholder="北京思密达"> 
            </th>
        </tr>
        <tr>
            <th>
                婚姻状况
            </th>
            <td>
                <label>未婚</label>
                <input type="radio">
                <label>已婚</label>
                <input type="radio">
                <label>离婚</label>
                <input type="radio">
            </td>
        </tr>
        <tr>
            <th>学历</th>
            <td align="left">
                <input type="text" placeholder="幼儿园"> 
            </td>
        </tr>
        <tr>
            <th>月薪</th>
            <th align="left">
                <input type="text" placeholder="10000-20000"> 
            </th>
        </tr>
        <tr>
            <th>手机号码</th>
            <th align="left">
                <input type="number"> 
            </th>
        </tr>
        <tr>
            <th>所在地区</th>
            <th align="left">
                <input type="text"> 
            </th>
        </tr>
        <tr>
            <th>喜欢的类型</th>
            <th align="left">
                <input type="checkbox" id="checkbox1" name="checkbox" value="复选框">可爱的
                <input type="checkbox" id="checkbox2" name="checkbox" value="复选框">小鲜肉
                <input type="checkbox" id="checkbox3" name="checkbox" value="复选框">老腊肉

            </th>
        </tr>
        <tr>
            <th>自我介绍</th>
            <th align="left">
            <textarea name="showText" cols="20" rows="2"></textarea>
            </th>
        </tr>
        <tr>
            <th></th>
            <th align="left">
            <input type="button" value="免费注册" >
            </th>
        </tr>
        <tr>
            <th></th>
            <th align="left">
            <input type="radio">
            <label>我同意注册条款和会员加入标准</label>
            </th>
        </tr>
        <tr>
            <th></th>
            <th align="left"><a href="#" >我是会员</a>
            <a href="#" >立即登录</a>
            <a href="#" >前往修改页面</a></th>
        </tr>
        <tr>
            <th></th>
            <th align="left">
                <h2>我承诺</h2>
                
                <ul>
                    <li>年满18岁、单身</li>
                    <li>抱着严肃的态度</li>
                    <li>真诚寻找另一半</li>
                </ul>
            </th>
        </tr>
    </table>
</form>
</body>
</html>

学到了吧。多加练习更好地掌握每一个元素、属性。