表单静态页面

最新推荐文章于 2024-11-08 11:31:46 发布

原创

最新推荐文章于 2024-11-08 11:31:46 发布 · 1k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html

这是我在一个叫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 va