调查问卷表单

最新推荐文章于 2023-10-29 10:33:04 发布

准备笑脸相迎

最新推荐文章于 2023-10-29 10:33:04 发布

阅读量641

点赞数 1

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/dhdjssjshw/article/details/127471404

版权

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

调查问卷

最终效果

实现计划

设置问卷样本轮廓
为轮廓添加css样式

实现过程

创建form表单标签。
设置第一个li为姓名，文本框位于右侧；属性为文本属性；默认值为张三；最多输入6个字符。

<li>

    <label>姓名：</label>

     input class="right" type="text" value="张三" maxlength="6"/>

</li>

3.设置第二个li为出生日期，文本框位于右侧；属性为日期属性。

<li>

<label>出生日期：</label>

    <input class="right" type="date"/>

</li>

4.设置第三个li为性别，男和女的name相同，但设置其id不同，便可实现性别的单选，并且点击文字也可选择；设置其属性为radio;使其变成可选的。

<li>

     <label>性别:</label>

         <div class="right">

              <input type="radio" name="female" id="male"/>

              <label for="male">男

              <input type="radio" name="female" id="female"/>

              <label for="female">女

              </label for="female">

              </label for="male">

         </div>
</li>

5.设置第四个li为体重，位于右侧；为number属性只可输入数字最小值为10，最大值为100。

<li>

       <label>体重</label>

       <div class="right">

       <input type="number" min="10" max="100" />kg

       </div>

</li>

6.设置第五个li为兴趣，位于右测可多选。

<li>

    <label>兴趣：</label>

    <div class="right">

    <input type="checkbox" />唱歌

    <input type="checkbox" />跳舞

       <input type="checkbox" />游泳

    </div>

</li>

7.设置第六个li为喜欢的颜色，位置在右侧；属性为color，初始颜色是#ff0000.

<li>

        <label>喜欢的颜色：</label>

        <input class="right" type="color" value="#ff0000" />

</li>

8.设置第七个li为喜欢的上传头像，位置在右侧属性为file。

<li>

     <label>上传头像：</label>

     <input class="right" type="file"/>

     <div></div>
</li>

9.设置第八个li为您的建议，是一个文本域；设置每行最多字数和列数。

<li class="advise">

      <label>您的建议：</label>

      <textarea name="opinion" cols="30" rows="10"></textarea>

</li>

10.设置提交按钮。

<li class="footer">

       <input type="submit"/>

</li>

css设置：

设置from的宽和边距，设置边框颜色和透明度，设置圆角：border-radius: 50px;设置背景颜色。
选中所有ul和li，使填充和边距为0.无属性值
选中ul下的li使其高为50.
Class为right的宽为180px；
选择具有焦点的输入元素，溢出时会隐藏。
From中的footer中的文字位于中间。
提交按钮设置宽高边距和鼠标悬于上方时的变化。
设置class的高。

设置textarea的宽和高。

<style>
			form{
				width: 343px;
				margin: 0 auto;
				padding: 30px;
				border: 1px solid rgba(0,0,0,0.2);
				border-radius: 50px;
				background: #eee;
			}
			ul,li{
				padding: 0;
				margin: 0;
				list-style: none;
			}
			ul li{
				height: 50px;
			}
			.right{
				float: right;
				width: 180px;
			}
			input:focus{
				background-color:rgba(0,0,0,0.2);
				overflow: hidden;
			}
			form.footer{
				text-align: center;
			}
			input[type=submit]{
				width: 100px;
				height: 30px;
				margin-top: 10px;
				cursor: pointer;
			}
			.advise{
				height: 150px;
			}
			textarea{
				width: 100%;
				height: 100px;
			}
		</style>

项目总结