Registration Form in HTML and CSS
Let's make an Applicant Job Registration Form using HTML and CSS only.
This form used new CSS pseudo properties like ":is , :not, :focus, :invalid"
And for the form validations, HTML Input Attributes with CSS has been used.
Watch Video Tutorial
https://youtu.be/Fa7Mz-wLTGY
Live Preview.!
Applicant Job Registration Form
HTML Code
<main>
<h2>Applicant Job Registration Form</h2>
<form action="">
<h3>Contact Information</h3>
<div class="form-inline">
<div class="form-group">
<label for="">First Name <span>*</span></label>
<input type="text" placeholder="John" minlength="3" required>
</div>
<div class="form-group">
<label for="">Last Name <span>*</span></label>
<input type="text" placeholder="Doe" minlength="3" required>
</div>
</div>
<div class="form-inline">
<div class="form-group">
<label for="">Email Address <span>*</span></label>
<input type="email" placeholder="eg: example@mail.com" required>
</div>
<div class="form-group">
<label for="">Phone Number <span>*</span></label>
<input type="tel" placeholder="555-555-5555" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required>
</div>
</div>
<br>
<h3>Position</h3>
<div class="form-group">
<label for="">Position you are applying for <span>*</span></label>
<input type="text" placeholder="Assistant Manager" minlength="3" required>
</div>
<div class="form-group">
<label for="">Resume Upload <span>*</span></label>
<input type="file" required>
</div>
<div class="form-group">
<label for="">Portfolio Website <span>*</span></label>
<input type="url" placeholder="eg: https://www.yourwebsite.com">
</div>
<div class="form-inline">
<div class="form-group">
<label for="">Salary Requirement <span>*</span></label>
<input type="text" placeholder="eg: 50,000" minlength="3" required>
</div>
<div class="form-group">
<label for="">When can you Start? <span>*</span></label>
<input type="date" required>
</div>
</div>
<br><hr>
<div class="form-group">
<label for="">Are you willing to relocate?</label>
<br>
<div class="form-inline">
<input type="radio" name="relocate">
<label for="">Yes</label>
</div>
<div class="form-inline">
<input type="radio" name="relocate">
<label for="">No</label>
</div>
<div class="form-inline">
<input type="radio" name="relocate">
<label for="">Not Sure</label>
</div>
</div>
<br>
<div class="form-group">
<label for="">Last company you worked for?</label>
<input type="text" placeholder="eg: google">
</div>
<div class="form-group">
<label for="">Comment</label>
<textarea placeholder="your valuable comment" rows="5"></textarea>
</div>
<hr><br>
<button type="submit">Register Now</button>
</form>
</main>
CSS Code
/* Google Roboto Font Import */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');
/* Colors Variriables */
:root{
--mainColor: #023e8a;
--secondayColor: #ebebeb;
--labelColor: #5a5a5a;
--placeholderColor: #a3a3a3;
}
*{
font-family: 'Roboto', sans-serif;
font-size: 14px;
font-weight: normal;
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background-color: #eee;
}
hr{
border: 1px solid rgba(236, 240, 241,0.3);
}
.form-group{
display: inline-block;
margin: 10px 5px;
width: calc(100% - 10px);
}
.form-group :is(.form-inline){
display: flex;
justify-content: start;
align-items: center;
margin-bottom: 10px;
}
.form-group :is(.form-inline) input{
width: unset;
margin-right: 5px;
}
.form-group :is(.form-inline) label{
margin-bottom: 0;
}
.form-inline{
display: flex;
justify-content: space-between;
}
.form-inline .form-group{
width: 48%;
}
main{
width: 800px;
height: auto;
margin: 0 auto;
background-color: #fff;
box-shadow: 0 0 2px #808080;
padding: 30px;
}
main h2{
font-size: 20px;
text-transform: uppercase;
margin-bottom: 30px;
}
form h3{
color: var(--secondayColor);
background-color: var(--mainColor);
margin-bottom: 10px;
padding: 5px;
text-transform: uppercase;
}
form label{
color: var(--labelColor);
margin-bottom: 6px;
display: block;
}
form label span{
color: red;
font-size: 16px;
}
form :is(input, textarea){
width: 100%;
padding: 8px 5px;
border: 1px solid var(--secondayColor);
outline: 1px solid transparent;
outline-offset: 2px;
}
form :is(input, textarea):focus{
outline: 1px solid var(--secondayColor);
}
::placeholder,
form :is(input[type="file" i], input[type="date" i]){
color: var(--placeholderColor);
}
form input[type="file"]::file-selector-button{
padding: 4px 8px;
background-color: var(--mainColor);
color: var(--secondayColor);
border: none;
outline: none;
cursor: pointer;
}
form button{
padding: 6px 10px;
background-color: var(--mainColor);
color: var(--secondayColor);
border: none;
outline: 1px solid transparent;
outline-offset: 2px;
cursor: pointer;
transition: 0.3s ease;
margin-left: 5px;
}
form button:hover{
outline: 1px solid var(--mainColor);
}
/*Validation Style*/
form input:invalid:not(:focus, :placeholder-shown){
outline: 1px solid red;
}
form :is(input[type="date"]:invalid, input[type="file"]:invalid):not(:focus, :placeholder-shown){
outline: 1px solid transparent;
}
/*Responsive Styling*/
@media only screen and (max-width: 580px){
.form-inline{
display: block;
}
.form-inline .form-group{
width: 100%;
}
main{
width: 100%;
padding: 30px 15px;
}
main h2{
font-size: 16px;
}
form{
width: 100%;
}
}
0 Comments