调查问卷页面

最新推荐文章于 2024-08-22 19:07:37 发布

绛橘色的日落699

最新推荐文章于 2024-08-22 19:07:37 发布

阅读量590

点赞数 2

文章标签： css3 html5

本文链接：https://blog.csdn.net/weixin_67191988/article/details/127519099

版权

学号后四位：（必填）0215
邀请人ID：（非必填）

知识点

<form>标签嵌套多个表单控件和提交按钮，HTML中新增的type类型number和color

项目名称及描述

调查问卷页面：该界面包含用户名输入框、日期格式输入框、性别单选按钮、兴趣复选框、文字域和提交按钮等，当用户单击“提交”按钮后，就会将表单中填写的用户信息提交给服务器。

项目代码

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style type="text/css">
/*定义form样式*/

            form {
               width: 343px;
               margin: 0 auto;
               padding: 30px;
               border: 1px solid rgba(0, 0, 0, .2);
               border-radius: 5px;
               background: #eee;
           }

/*设置ul和li样式*/

           ul,
           li {
               padding: 0;
               margin: 0;
               list-style: none;
           }

           ul li {
               height: 50px;
           }

/*定义input元素向右浮动*/

           .right {
               float: right;
               width: 180px;
           }

/* 当该元素获得焦点时，改变其背景颜色的透明度，设置元素溢出隐藏*/

        input:focus {
               background-color: rgba(0, 0, 0, 0.2);
               overflow: hidden;
           }

           form.footer {
               text-align: center;
           }

           /*设置当鼠标放到type=submi上时，鼠标指针变为一只小手形状*/

        input[type=submit] {
               width: 100px;
               height: 30px;
               margin-top: 10px;
               cursor: pointer;
           }、

/*实现文件和文本域页面样式*/

           .advise {
               height: 150px;
           }

           textarea {
               width: 100%;
               height: 100px;
           }
       </style>
   </head>
   <body>
       <form action="#">
           <ul>
               <li>
                   <label>姓名:</label>
                   <input class="right" type="text" value="牛若茜" maxlength="6" />
               </li>
               <li>
                   <label>出生日期:</label>
                   <input class="right" type="date" />
               </li>
               <li>
                   <label>性别:</label>
                   <div class="right">
                       <input type="radio"  name="male" />
                       <label  for="male">男
                           <input type="radio"  name="female" />
                           <label  for="female">女
                           </label  for="female">
                       </label  for="male">
                   </div>   
               </li>

               <li>
                   <label for="">体重</label>
                   <div class="right">
                       <input type="number" min="10" max="100" />kg
                   </div>
               </li>

               <li>
                   <label for="">兴趣:</label>
                   <div class="right">
                       <input type="checkbox" />唱歌
                       <input type="checkbox" />跳舞
                       <input type="checkbox" />游泳
                   </div>
               </li>

               <li>
                   <label for="">喜欢的颜色:</label>
                   <input class="right" type="color" value="#ff0000" />
               </li>

               <li>

/* 文件域定义文件域实现头像图片上传功能*/
                   <label>上传头像:</label>
                   <input class="right" type="file" />
               </li>

/*定义页面中文本域让用户输入建议的内容*/
               <li class="advise">
                   <label>您的建议:</label>
                   <textarea name="opinion" cols="30" rows="10"></textarea>
               </li>

               <li class="footer">
                   <input type="submit" />
               </li>

           </ul>
       </form>
   </body>
</html>

项目完成思路

单击体重输入框测试number类型的效果，并且设置体重的取值范围是50-100kg；

单击“年-月-日”输入框弹出日期进行选择，选择自己的出生日期；

单击性别单选框实现男和女的选择，选择：“男”或“女”；

单击兴趣复选框实现兴趣的选择，比如“唱歌”；

单击颜色框弹出颜色选取器，选择自己喜欢的颜色进行选取；

单击“选择文件”按钮实现用户头像的上传；

单击“提交”按钮，实现表单的提交。