表单静态页面

这是我在一个叫freeCodeCamp网站找到的表单小项目，这个项目整体来说并不难，只是一个静态的网页设计，对于新手练习来说应该是个不错的选择。

index.html

<div class="mybackground">
        <h1 id="title">freeCodeCamp Survey Form</h1>
        <p id="description"><i>Thank you for taking the time to help us improve the platform</i></p>

        <!-- 表单 -->
        <form id="survey-form" method="get" action="#">
            <!-- 名字 -->
            <div class="item">
                <label for="name" id="name-label">Name<br></label>
                <input type="text" id="name" class="commons" placeholder="Enter your name" required />
            </div>
            <!-- 邮箱 -->
            <div class="item">
                <label for="email" id="email-label">Email<br></label>
                <input type="email" id="email" class="commons" placeholder="Enter your email" required />
            </div>
            <!-- 年龄 -->
            <div class="item">
                <label for="number" id="number-label">Age(optional)<br></label>
                <input type="number" id="number" class="commons" max="150" min="0" placeholder="Age" required />
            </div>

            <!-- 下拉列表 -->
            <div class="item">
                <label for="number" id="number-label">Which option best describes your current role?<br></label>
                <select name="dropdown" id="dropdown" class="myselected">
                    <option value="Select current role" selected disabled>Select current role</option>
                    <option value="Student">Student</option>
                    <option value="Full time job">Full time job</option>
                    <option value="Full time learner">Full time learner</option>
                    <option value="Prefer not to say">Prefer not to say</option>
                    <option value="Other">Other</option>
                </select>
            </div>

            <!-- 单选按钮 -->
            <div class="item">
                <span>Would you recommend freeCodeCamp to a friend?<br></span>
                <input name="choose" type="radio" id="Definitely" checked>
                <label for="Maybe">Maybe<br></label>
                <input name="choose" type="radio" id="Maybe">
                <label for="Maybe">Maybe<br></label>
                <input name="choose" type="radio" id="Notsure">
                <label for="Notsure">Not sure<br></label>
            </div>

            <!-- 下拉列表 -->
            <div class="item">
                <label for="number" id="number-label">What is your favorite feature of freeCodeCamp?<br></label>
                <select name="dropdown" id="dropdown" class="myselected">
                    <option value="Select an option" selected disabled>Select an option</option>
                    <option value="Challenges">Challenges</option>
                    <option value="Projects">Projects</option>
                    <option value="Community">Community</option>
                    <option value="Open Source">Open Source</option>
                </select>
            </div>

            <!-- 多选框 -->
            <div class="item form-group">
                <span>What would you like to see improved? (Check all that apply)<br></span>
                <input type="checkbox" style="width: 18px;height: 18px;" id="1">
                <label for="1">spanFront-end Projects</label><br>
                <input type="checkbox" id="2">
                <label for="2">Back-end Projects</label><br>
                <input type="checkbox" id="3">
                <label for="3">Data Visualization</label><br>
                <input type="checkbox" id="4">
                <label for="4">Challenges</label><br>
                <input type="checkbox" id="5">
                <label for="5">Open Source Community</label><br>
                <input type="checkbox" id="6">
                <label for="6">Gitter help rooms</label><br>
                <input type="checkbox" id="7">
                <label for="7">Videos</label><br>
                <input type="checkbox" id="8">
                <label for="8">City Meetups</label><br>
                <input type="checkbox" id="9">
                <label for="9">Wiki</label><br>
                <input type="checkbox" id="10">
                <label for="10">Forum</label><br>
                <input type="checkbox" id="11">
                <label for="11">Additional Courses</label><br>
            </div>

            <!-- 多行文本框 -->
            <div class="item">
                <span>Any comments or suggestions?</span><br>
                <textarea name="suggestion" id="suggestion" cols="62" rows="6"
                    placeholder="Enter your comment here..."></textarea>
            </div>

            <!-- 提交按钮 -->
            <div class="item">
                <button type="submit" id="submit">submit</button>
            </div>
        </form>

    </div>

index.css 

         * {
            padding: 0;
            margin: 0;
        }

        .mybackground {
            width: 100%;
            height: 1500px;
            background-color: rgba(36, 3, 145, 0.6);
        }

        /* 标题 */
        #title {
            color: white;
            font-weight: 420;
            text-align: center;
            padding-top: 50px;
        }

        #description {
            color: white;
            font-weight: 300;
            letter-spacing: 1px;
            text-align: center;
        }

        /* 表单 */
        #survey-form {
            width: 750px;
            height: 1350px;
            margin: 0 auto;
            margin-top: 20px;
            padding-top: 5px;
            border-radius: 10px;
            background-color: rgba(11, 10, 12, 0.562);
        }

        /* 表单里的模块 */
        .item {
            padding: 35px 50px 0 50px;
            color: white;
        }

        /* 输入框样式 */
        .commons {
            width: 96%;
            height: 36px;
            font-size: 18px;
            padding-left: 14px;
            margin-top: 5px;
            border-radius: 5px;
        }

        /* 选择框样式 */
        .myselected {
            width: 644px;
            height: 36px;
            font-size: 18px;
            padding-left: 14px;
            margin-top: 5px;
            border-radius: 5px;
        }

        /* 多选框大小 */
        .form-group input {
            width: 18px;
            height: 18px;
            margin-top: 5px;
        }

        /* 多选框文本位置 */
        .form-group label {
            position: relative;
            bottom: 4px;
        }

        /* 多行文本框 */
        #suggestion {
            margin-top: 10px;
            padding: 10px;
            border-radius: 5px;
            font-size: 19px;
        }

        /* 提交按钮 */
        #submit {
            width: 650px;
            height: 42px;
            font-size: 20px;
            border-radius: 8px;
            background: rgb(69, 226, 55);
        }

 

这是效果图 

 

 新手学习可以到下面这个网站看一下

免费学习编程 - Python、JavaScript、Java、Git 等 (freecodecamp.org)https://chinese.freecodecamp.org/learn这是这个项目地址

响应式网页设计项目 - 制作一个调查表格 | 学习 | freeCodeCamp.orghttps://chinese.freecodecamp.org/learn/responsive-web-design/responsive-web-design-projects/build-a-survey-form