使用表单收集个人信息

绪论

已于 2024-04-07 17:28:29 修改

阅读量514

点赞数 14

文章标签： html 前端

于 2024-04-07 17:26:25 首次发布

本文链接：https://blog.youkuaiyun.com/2303_76481866/article/details/137468975

版权

本文介绍了如何在网页中创建表单，包括HTML表单元素如<form>,<input>,<select>,<textarea>的使用，以及如何通过CSS进行样式设计，提升用户体验。同时展示了如何使用CSS实现响应式设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.实验目的：

熟练掌握在网页中创建表单的方法，掌握表单标记<form>、输入标记

<input>、选择列表标记<select>、文本域标记<textarea>。

2.实验原理

2.1 HTML表单元素：

<form>：用于定义一个HTML表单，通过action属性指定表单数据提交到的URL，通过method属性指定数据提交的方式（GET或POST）。
<input>：用于创建不同类型的输入字段，如文本字段、密码字段、单选按钮、复选框等。
<textarea>：用于创建多行文本输入框。
<select>和<option>：用于创建下拉列表。
<label>：用于定义输入字段的标签。
<button>：用于创建点击按钮。

2.2 CSS样式

使用CSS对表单进行样式设计，包括布局、颜色、字体、边框等，以提升用户体验和表单的可读性。
可以通过CSS实现表单的响应式设计，使其在不同设备和屏幕尺寸上都能良好地显示和交互。

3. 程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            background-color: rgb(203, 219, 176);
            height: 700px;
             display: flex;
            align-items: center;
            justify-content: center;
        } 
       .hahaa{
         border-style:solid;
         border-color: antiquewhite;
         padding: 50px;
         width:350px;
         background-color: rgb(197, 228, 168);
       }
    </style>
</head>
<body>
    <div class="box">
    <form action="" class="hahaa">
        <table class="haha" style="text-align:left">
         <!-- 账号 -->
            <tr>
           <td>账号:<input type="text" name="name"></td>
        </tr>
         <!-- 密码: -->
        <tr>
           <td>密码:<input type="password" name="mima"></td>
        </tr>
        <!-- 性别： -->
        <tr>
          <td>
           男：<input type="radio" name="anniu" >
           女：<input type="radio" name="anniu">
          </td>
        <td>
        </td> 
       </tr>
       <!-- 兴趣 -->
       <tr>
        <td>兴趣：<input type="checkbox" name="qian">前端开发
            <input type="checkbox" name="hou">后端开发
            <input type="checkbox" name="mei">美工
       </td>
       </tr>
      <!--学历  -->
       <tr>
        <td>
        学历:<select value="本科以下">
            <option>本科以下</option>
            <option>本科</option>
            <option>专科</option>
            <option>高中</option>
            <option>小学</option>
        </td></select>
       </tr> 
      <!-- 个人简介 -->
       <tr>
        <td>
        个人简介：
        </td>
       </tr>
      <!-- 盒子 -->
        <tr>
            <td>
           <textarea name="textfield3" rows="4" cols="40"></textarea> </div>
           </td>
        </tr>
        <!-- 按钮 -->
        <tr>
            <td>
                <input type="button" value="确定">
                <input type="button" value="重置">
            </td>
        </tr>
       </table>
      
        </form>
        </div>
</body>
</html>