如何使用HTML和CSS创建GeeksforGeeks的调查表?问题汇总
表单始终是用于收集用户输入信息的任何项目的重要组成部分。在本文中,我们将使用 HTML 和 CSS 创建 GeeksforGeeks 的调查表。在这种形式中,用户提出了几个问题。在这里,我们将使用 HTML 来设计表单的基本布局表单元素css,CSS 将为我们的布局提供漂亮的设计表单元素css,如文本装饰、文本颜色、背景颜色、文本对齐、边距、填充等。
先决条件: HTML 和 CSS 的基本概念,如标签、ID、颜色、边距、填充、字体、文本字段、复选框、单选按钮等。
方法:
例子:
HTML
<pre class="prism line-numbers lang-html" data-lang="HTML">`
Build a Survey Form using HTML and CSS
body {
background-color: #05c46b;
font-family: Verdana;
text-align: center;
}
/ Styling the Form (Color, Padding, Shadow) /
form {
background-color: #fff;
max-width: 500px;
margin: 50px auto;
padding: 30px 20px;
box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.5);
}
/ Styling form-control Class /
.form-control {
text-align: left;
margin-bottom: 25px;
}
/ Styling form-control Label /
.form-control label {
display: block;
margin-bottom: 10px;
}
.form-control input,
.form-control select,
.form-control textarea {
border: 1px solid #777;
border-radius: 2px;
font-family: inherit;
padding: 10px;
display: block;
width: 95%;
}
.form-control input[type="radio"],
.form-control input[type="checkbox"] {
display: inline-block;
width: auto;
}
/ Styling Button /
button {
background-color: #05c46b;
border: 1px solid #777;
border-radius: 2px;
font-family: inherit;
font-size: 21px;
display: block;
width: 100%;
margin-top: 50px;
margin-bottom: 20px;
}
#GeeksforGeeks Survey Form
Name
Email
Age
Which option best describes you?
Student
Intern
Professional
Other
Would you recommed GeeksforGeeks
to a friend?
Yes
No
Maybe
Languages and Frameworks known
(Check all that apply)
C
C++
C#
Java
Python
JavaScript
React
Angular
Django
Spring
Any comments or suggestions
Submit
`</pre>
输出:
发表评论
热门文章
Spimes主题专为博客、自媒体、资讯类的网站设计....
一款个人简历主题,可以简单搭建一下,具体也比较简单....
仿制主题,Typecho博客主题,昼夜双版设计,可....
用于作品展示、资源下载,行业垂直性网站、个人博客,....
ybqsy
4天前
解决了,post文件最后
删除就可以了