freeCodeCamp | Survey Form

展示图

freeCodeCamp | Survey Form_第1张图片

HTML代码

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    
    <link rel="stylesheet" href="../css/Build_A_Survey_Form.css">
    <title>Titletitle>
head>
<body>
<h1 id="title">freeCodeCamp Survey Formh1>
<p id="description">Thank you for taking the time to help us improve the platformp>
<form id="survey-form">
    <label id="name-label" for="name"> Name
        <input type="text" id="name" placeholder="Enter your name" required/>
    label>
    <label id="email-label" for="email">Email
        <input type="email" id="email" placeholder="Enter your email" required/>
    label>
    <label id="number-label" for="number">Age(optional)
        <input type="number" id="number" min="18" max="60" placeholder="Age"/>
    label>
    <p>Would you recommend freeCodeCamp to a friend?p>
    <label id="definitely-label" for="definitely">
        <input type="radio" name="choice" id="definitely" value="definitely"/>Definitely
    label>
    <label id="maybe-label" for="maybe">
        <input type="radio" name="choice" id="maybe" value="maybe"/>Maybe
    label>
    <label id="not_sure-label" for="not_sure">
        <input type="radio" name="choice" id="not_sure" value="not_sure"/>Not sure
    label>
    <p id="dropdown-question">What is your favorite feature of freeCodeCamp?p>
    <label for="dropdown">
        <select id="dropdown">
            <option disabled selected>Select an optionoption>
            <option>Challengesoption>
            <option>Projectsoption>
            <option>Communityoption>
            <option>Open Sourceoption>
        select>
    label>
    <p id="checkbox-question">What would you like to see improved?p>
    <label>
        <input type="checkbox" value="1"/> Front-end Projects
    label>
    <label>
        <input type="checkbox" value="2"/> Back-end Projects
    label>
    <label>
        <input type="checkbox" value="3"/> Data Visualization
    label>
    <label>
        <input type="checkbox" value="4"/> Open Source Community
    label>
    <label>
        <input type="checkbox" value="5"/> Additional Courses
    label>
    <p id="textarea-question">Any comments or suggestions?p>
    <label>
        <textarea rows="6" cols="30" placeholder="Enter your comment here...">textarea>
    label>
    <label>
        <input type="submit" value="Submit" id="submit"/>
    label>
form>
body>
html>

CSS代码

body {
	/*背景图片路径可选择本地也可选择在线,根据自己需求修改url*/
    background-image: url("https://images.unsplash.com/photo-1573480813647-552e9b7b5394?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2253&q=80");
    font-family: Cambria, serif;
}

#title {
    text-align: center;
    font-family: "Book Antiqua", serif;
    color: white;
}

#description {
    font-family: "Copperplate Gothic Light", serif;
    color: white;
    text-align: center;
}

#survey-form {
    background-color: rgba(40, 3, 40, 0.5);
    border-radius: 10px;
    min-width: 600px;
    width: 40vw;
    margin: 0 auto;
}

label{
    color: white;
    display: block;
    margin: 20px 0;
    padding: 0 100px;
}

p {
    display: block;
    margin: 5px 0;
    padding: 0 100px;
}

#dropdown-question, #checkbox-question, #textarea-question {
    display: block;
    margin: 20px 0;
    padding: 0 100px;
}

input {
    margin: 10px 0;
}

p {
    color: white;
}

#name-label {
    padding-top: 30px;
}

#name-label, #email-label, #number-label {
    /*padding: 20px;*/
}

#definitely-label, #maybe-label, #not_sure-label{
    margin: 0;
}

input[type="checkbox"] {
    margin: 0;
}

#name, #email, #number, #dropdown, textarea{
    display: block;
    width: 100%;
    height: 1.5rem;
}

textarea {
    height: 6rem;
}

#submit {
    width: 100%;
    height: 2rem;
    margin: 5px 0;
    background-color: #62c462;
}


前端学习的第一篇博客,欢迎大家和我一起交流学习,后续还会继续更新FreeCodeCamp学习内容,如果各位觉得有所帮助,路过点个赞吧谢谢!

你可能感兴趣的:(css,前端,html)