Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

I have many issues with my code, 1st how can I make it so all the inputs/txtarea have the same colored border(ex brown), and when the user clicks on it, it stays brown, only after the user moves on to the next input it changes to red or green. 2nd I learned in the last couple theories how to style radio button by giving them an appearance of none and styling them with the :before, but here they said to use .radio group input[type=“radio”]:checked {} this didn’t do anything except the box shadow.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Job Application Form</title>
    <link href="styles.css" rel="stylesheet">
</head>
<body>
    <main>
        <div class="container">
            <h1>Job Application Form</h1>
            <form>

                <label class="input-label" for="name">Full Name:</label>
                <input class="input-info" type="text" id="name" name="name" placeholder="E.g., John Doe" required>

                <label class="input-label" for="email">Email:</label>
                <input class="input-info" type="email" id="email" name="email" placeholder="E.g., name@gmail.com" required>

                <label class="input-label" for="position">Position:</label>
                <select class="input-info"id="position">
                    <option>Web Developper</option>
                    <option>Data Analysis</option>
                    <option>Machine Learning</option>
                    <option>Cyber Security</option>
                </select>

                <fieldset class="radio-group">
                    <legend>Availability</legend>

                    <input type="radio" id="full-time" name="availability">
                    <label for="full-time">Full-Time</label>

                    <input type="radio" id="part-time" name="availability">
                    <label for="part-time">Part-Time</label>
                </fieldset>

                <label class="input-label"for="message">Why do you want this job?</label>
                <textarea id="message" rows="4" cols="50" required></textarea>
                
                <button class="submit-btn" type="submit">Submit Form</button>
            </form>
        </div>
    </main>

</body>
</html>

/* file: styles.css */
body{
  font-family: Ariel,sans-serif;
  font-size: 1.2rem;
  background-color: whitesmoke;
}
.container{
  width: 80vw;
  max-width: 600px;
  background-color:white;
  margin: 30px auto;
  padding: 20px;
  border-radius: 10px
}
h1{
  text-align: center;
}
.input-label{
  display:block;
  margin: 10px 0px 5px 0px;
}
.input-info{
  width: 100%;
  height: 2rem;
  font-size: 1rem;
  border: 1px solid burlywood;
  border-radius: 15px;
  padding-left: 10px;
}
textarea{
  width:100%;
  font-size: 1rem;
  border: 1px solid burlywood;
  border-radius: 15px;
}
.radio-group{
  margin-top:15px;
  border-radius:15px;
  border:1px solid green;
}
input:focus, textarea:focus{
  border: 2px solid green;
  outline:none;
}
input:invalid, select:invalid, textarea:invalid{
  border-color:red;
}
input:valid, select:valid, textarea:valid{
  border-color: green;
}
button{
  display: block;
  padding: 10px;
  font-size: 1rem;
  border-radius: 15px;
  background-color: green;
  color: white;
  border: none;
  margin: 10px auto;
}
button:hover{
  background-color: darkgreen;
}
.radio-group input[type="radio"]:checked{
  background-color:green;
  border-color: green;
  box-shadow: 0px 0px 10px 0px lightgreen;
}
.radio-group input[type="radio"]:checked + label{
  color:green;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/144.0.0.0 Safari/537.36

Challenge Information:

Build a Job Application Form - Build a Job Application Form

2

Welcome to the forum @GhadyKeyrouz!

Well, simply changing the color of the border correctly.
Like for textarea:focus your code turns it´s border to green and you want it to be brown.

It does makes the radio button green, when it´s not hovered over with the cursor.
So, how do you mean it does nothing?

appearance: none is mainly used for creating uniqe styles. You don´t using it currently, so the browser loads a standard radio button

This is from the example project:

image
image252×190 4.87 KB

As you see, the appearance: none removes the default styling of the radio, than the attributes creates a radio very similar to the default.
Like border-radius: 50%; and same width and height makes it a round and border added too.
This is an example right from the Lab of use of appearance: none.

1 Like
3

I have .input-info and textarea borders set to burlywood, when in focus set to green and when invalid set to red, but they are red at the start bcz when empty they are invalid.
Now for the radio buttons this is what it says to do:
15. You should use the :checked pseudo-class on .radio-group input[type="radio"] to add a border color when the radio button is selected.
16. You should use the :checked pseudo-class on .radio-group input[type="radio"] to add a background color when the radio button is selected.
17. You should use the :checked pseudo-class on .radio-group input[type="radio"] to add a box shadow when the radio button is selected.
18. You should use the :checked pseudo-class on radio buttons to change the text color of the associated label when the option is selected.
and that’s exactly what I did, and when I run the test it says it’s true, it didn’t say to do it like in the picture you sent (I did that in the last workshop on how to make custom radio btns)

4

here’s my updated code for fixing the radio button, I just think the instructions on the lab project were a bit confusing about the radio button. As you can see I commented out the old code to show the difference, but I still don’t know how to fix my borders issue (I want all borders to be brown, when focused they should be green and after the user moves to another input it changes color to red if its invalid or stays green if it’s valid)

body{

  font-family: Ariel,sans-serif;

  font-size: 1.2rem;

  background-color: whitesmoke;

}

.container{

  width: 80vw;

  max-width: 600px;

  background-color:white;

  margin: 30px auto;

  padding: 20px;

  border-radius: 10px

}

h1{

  text-align: center;

}

.input-label{

  display:block;

  margin: 10px 0px 5px 0px;

}

.input-info{

  width: 100%;

  height: 2rem;

  font-size: 1rem;

  border: 1px solid burlywood;

  border-radius: 15px;

  padding-left: 10px;

}

textarea{

  width:100%;

  font-size: 1rem;

  border: 1px solid burlywood;

  border-radius: 15px;

}

.radio-group{

  margin-top:15px;

  border-radius:15px;

  border:1px solid green;

}

input:focus, textarea:focus{

  border: 2px solid green;

  outline:none;

}

input:invalid, select:invalid, textarea:invalid{

  border-color:red;

}

input:valid, select:valid, textarea:valid{

  border-color: green;

}

button{

  display: block;

  padding: 10px;

  font-size: 1rem;

  border-radius: 15px;

  background-color: green;

  color: white;

  border: none;

  margin: 10px auto;

}

button:hover{

  background-color: darkgreen;

}

/*.radio-group input[type="radio"]:checked{

  background-color:green;

  border-color: green;

  box-shadow: 0px 0px 10px 0px lightgreen;

}

.radio-group input[type="radio"]:checked + label{

  color:green;

}*/




.radio-group input {

  appearance: none;

  width: 20px;

  height: 20px;

  border-radius: 50%;

  border: 2px solid gray;

  vertical-align: bottom;

}




.radio-group input::before {

  display: block;

  content: " ";

  width: 11px;

  height: 11px;

  border-radius: 50%;

  transition: all 0.3s ease-in;

}




.radio-group input:checked::before {

  transform: translate(3px, 3px) scale(1);

  background-color: darkgreen;

}

.radio-group input:checked + label{

  color:green;

}
5

you may need to use outline property to change colors, the borders are hidden below the outline

6

how should I use the outline property? The borders are visible, here’s what’s happening: the borders are red before focusing on them bcz by default the empty inputs are invalid and required, if I remove the required attribute they become green bcz they are valid. I don’t want the inputs to validated while empty, I want them to be after the user tries to type something in them, so by default all borders should be burlywood and when the user types something in them then they change color to red or green. Does that make sense?

7

here you can learn about the outline:

if your border is not partially hidden, then don’t worry about the outline property

8

but why should I use the outline property, it’s basically the same as borders and it doesn’t solve the problem I’m facing.

9

last time I was experimenting I had found out that the border was hidden below the outline, if this is not your experience you can disregard my suggestion with the outline

10

I don’t have any outline properties in my code.

11

the outline is a part of the input elements, it can appear even if you don’t set it yourself

12

I tried giving all the inputs an outline of none, nothing changed. Is what I’m trying to do not possible without JS?

13

what do you not like of what’s set now?

14

The borders are red before focusing on them bcz by default the empty inputs are invalid and required, if I remove the required attribute they become green bcz they are valid. I don’t want the inputs to validated while empty, I want them to be after the user tries to type something in them, so by default all borders should be burlywood and when the user types something in them then they change color to red or green. Does that make sense?

15

Now I understand the issue, yeah, not something that can be fixed that easily valid/invalid state gets precedence on everything else

it’s probably something that needs JS yeah, you will find in the JS cert an other lab with a form, where you can experiment with this using JS once you reach that part

16

Oh alright, thank you for the help.