Form in HTML and CSS…
Tutorial for Beginners,
Let’s go and learn how to create a form,
This is a fundamental index page, and inside the <body> tag, I’m going to create a <form> tag.
So, inside the <form> tag. I’m going to create an input tag. Inside the <input> tag, we have a couple of attributes that we need to have inside the input, they are mandatory.
“Type”- Tell the browser what type of input this is
“Name”- It is something that we can remember to handle the data form
“Placeholder”- It is optional. That is sort of faded that gives you a hint of what you need to type.
“Value”- Value is not a faded background text. It is going to be actual text inserted inside the input box.
“Radio”- The radio is when we have the option to tick off a small circle where you can choose between a couple of different options inside. Let’s say inside survey or something.
“Submit button”- You can get the input that will be the submit button. Once click the submit button it’s actually going to submit data from inside the form and send it to whatever document that has to handle the data using another programing language.
<Textarea>- We can actually resize this one and write a lot of text inside of it.
<Select>- We can get a drop-down option using the select tag.
HTML code
Browser output
Then add CSS,
Let’s go and include a style sheet, so I’m going to create a link to the style sheet inside the <head> tag.
Inside the style sheet here I’m going to set styling for the form. I want to set the width to 300 pixels
Here, how it looks like inside the browser,
Then I’m going to change the width of the inputs. I set the width to 100%,
Now, you guys can see we have bigger input boxes,
Then I’m going to style the textarea. I want to resize it only vertically and up to 100px,
Here it appears like this in the browser.
Fine…
You can change color, font size, and whatever you want using CSS. Let’s discuss them in my next article. I put some example codes below, and you can refer to the stuff and create your form looks better.
So give a clap and stay tuned…😊
Example 1:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
form {border: 3px solid #f1f1f1;}input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}button:hover {
opacity: 0.8;
}.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
}img.avatar {
width: 40%;
border-radius: 50%;
}.container {
padding: 16px;
}span.psw {
float: right;
padding-top: 16px;
}/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
</style>
</head>
<body><h2>Login Form</h2><form action="/action_page.php" method="post">
<div class="imgcontainer">
<img src="img_avatar2.png" alt="Avatar" class="avatar">
</div><div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required><label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div><div class="container" style="background-color:#f1f1f1">
<button type="button" class="cancelbtn">Cancel</button>
<span class="psw">Forgot <a href="#">password?</a></span>
</div>
</form></body>
</html>
Example 2:
<!DOCTYPE html>
<html>
<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box}/* Full-width input fields */
input[type=text], input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}input[type=text]:focus, input[type=password]:focus {
background-color: #ddd;
outline: none;
}hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}/* Set a style for all buttons */
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}button:hover {
opacity:1;
}/* Extra styles for the cancel button */
.cancelbtn {
padding: 14px 20px;
background-color: #f44336;
}/* Float cancel and signup buttons and add an equal width */
.cancelbtn, .signupbtn {
float: left;
width: 50%;
}/* Add padding to container elements */
.container {
padding: 16px;
}/* Clear floats */
.clearfix::after {
content: "";
clear: both;
display: table;
}/* Change styles for cancel button and signup button on extra small screens */
@media screen and (max-width: 300px) {
.cancelbtn, .signupbtn {
width: 100%;
}
}
</style>
<body><form action="/action_page.php" style="border:1px solid #ccc">
<div class="container">
<h1>Sign Up</h1>
<p>Please fill in this form to create an account.</p>
<hr><label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required><label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required><label for="psw-repeat"><b>Repeat Password</b></label>
<input type="password" placeholder="Repeat Password" name="psw-repeat" required>
<label>
<input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px"> Remember me
</label>
<p>By creating an account you agree to our <a href="#" style="color:dodgerblue">Terms & Privacy</a>.</p><div class="clearfix">
<button type="button" class="cancelbtn">Cancel</button>
<button type="submit" class="signupbtn">Sign Up</button>
</div>
</div>
</form></body>
</html>
