Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:

Hello,
I am almost finished with my survey form. I am trying to input a back-ground image .
I am not sure how to install an image from my pc into the freecode to use as my back-ground. I know how to do it using a full URL, i.e., to attach an image using a website link, but the image i want is on my pc.
Just point me in the right direction please.

image
image924×974 54.2 KB

Your code so far

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Registration Form</title>
    <link rel="stylesheet" href="styles.css" />
</head>

<body div class="outline">
    <h1>Introduction To Programming</h1>


    <p id="descriptrion">This form attempts to quantify user satisfaction with the platform.The feedback will be used to
        improve the curriculum.</p>

    <form method="post" action='https://register-demo.freecodecamp.org'>

        <fieldset div class="personal-info">
            <label for="name">Name:</label><br>
            <input id="name-label" name="name" type="text" placeholder="John Doe" required><br>

            <label for="email">Email:</label><br>
            <input id="email-label" name="email" type="email" placeholder="johndoe@something.com" required><br>

            <label for="age">Age(optional):</label><br>
            <input id="age-label" name="age-label" type="number" placeholder="Enter your age" min="18" max="100"
                required><br>

            <label for="number">Enter your phone number:</label><br>
            <input id="number-label" type="tel" placeholder="123-45-678" min="7" max="10"
                pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" required><br>

        </fieldset>

        <fieldset div class="salary">
            <label>What best describes your current salary?</label>
            <select id="dropdown">
                <option value="above £30K">above £30k</option>
                <option value="less than £30k">less than £30K</option>
            </select>
        </fieldset>

        <fieldset div class="current-role">
            <label>What best describes your current role?</label>
            <select id="" dropdown">
                <option value="Student">Student</option>
                <option value="Unemployed">Unemployed</option>
                <option value="Employd Full Time">Employed Full Time</option>
                <option value="Employed Part Time">Employed Part Time</option>
            </select>
        </fieldset>


        <fieldset div class="prog-styles">
            <p>Type of programming interested in:</p>
            <label for="functional">Functional<input type="radio" id="functional" name="programming-style"
                    value="Functional"></label><br>

            <label for="declarative">Declarative<input type="radio" id="declarative" name="programming-style"
                    value="Declarative" </label><br>

                <label for="object-oriented">Object Oriented<input type="radio" id="object-oriented"
                        name="programming-style" value="Object Oriented" </label><br>

        </fieldset>

        <fieldset div class="languages">
            <p>Programming Languages of Interests:</p>

            <input type="checkbox" id="C++" value="C++" name="C++">
            <label for="C++">C++</label><br>

            <input type="checkbox" id="Fortran" value="Fortran" name="Fortran">
            <label for="Fortran">Fortran</label><br>

            <input type="checkbox" id="Java" value="Java" name="Java">
            <label for="Java">Java</label><br>

            <input type="checkbox" id="Pascal" value="Pascal" name="Pascal">
            <label for="Pascal">Pascal</label><br>

            <input type="checkbox" id="Ruby" value="Ruby" name="Ruby">
            <label for="Ruby">Ruby</label><br>

            <input type="checkbox" id="C#" value="C#" name="C#">
            <label for="C#">C#</label><br>

            <input type="checkbox" id="Python" name="Python" value="Python">
            <label for="Python">Python</label><br>

            <input type="checkbox" id="PHP" name="PHP" value="PHP">
            <label for>PHP</label><br>

        </fieldset>

        <fieldset div class="more-info">
            <label for="additional-info">Additional Information:</label><br>
            <textarea id="additional-info" name="additional-info" rows="6" cols="50"
                placeholder="Do you have anything else to add?"></textarea>
        </fieldset>

        <input type="submit" value="Submit">

    </form </body>

</html>

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36

Challenge: Survey Form - Build a Survey Form

Link to the challenge:
https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-survey-form-project/build-a-survey-form`Preformatted text``Preformatted text`

2

you can upload the image file to an online site like GitHub Pages (or any free image hosting site) and then link to it once it is up.

3

Thank you. I have it working

1 Like
4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.