Table Of Content:
Introduction
Prerequisite
Steps
Conclusion
Example
INTRODUCTION:
Form pages are an essential part of any project that requires users to input their information and they provide a way for websites to capture information from users and process requests. Forms can request a small amount of information-often a search query or a username and password. The input from the user is generally sent to a server(mail clients, web servers).
In this guide, we'll discuss how to use HTML to mark up a form and how to style the form with CSS.
PREREQUISITE: Basic concepts of HTML and CSS
STEP A: FORM ELEMENT(<form>)
The <form> element identifies where on the page control elements will appear. Use the <form> element to process the input.
<html>
<form>
form element
</form>
B. INPUT ELEMENT:<input>
This is one of the primary elements used in obtaining text from users. The <input> element uses the "type" attribute to define what type of information is to be captured within the control. The most popular "type" attribute values are;
"text"
"color"
"date"
"email"
"time"
"number"
"submit"
C. LABEL <label>
The label tag<label> is used for collecting text, like passwords, emails, etc. It defines a text label for the <input> tag. <label> must be equal to the "id" attribute.
<label>first name:</label>
<input type="text" name="firstname" id="name"
D. FORM BUTTONS
When a user inputs the required and requested information, <buttons> allow users to put that information into action. A "submit" button is used to process the data.
The <submit> button is created using the <input>element with a "type" attribute, value of "submit".
<input type="submit" name="submit" value="submit"
2. CSS is the language we use to style an HTML document, it describes how HTML elements should be displayed.
*:{ margin: 0;
padding: 0;
box-sizing: border-box;
}
form{
width: 400px;
margin:100px;
padding:20px;
font-family:sans-serif;
}
label{
font-family:sans-serif;
font-size: 18px;
font-style:arial;
}
The text-color can also be styled using any of the CSS color codes.
input#submit{
font-color:#0000FF
font-size: 16px;
background-color: #FFFFFF
cursor: pointer;
CONCLUSION:
Forms play a vital role in how users interact with, provide information to, and take action on websites.
We have learned all the important and simple steps to initialize and style a form page using HTML and CSS.
"'''"
<html>
<head>
<title>Registration Form</title>
</head>
<body>
<div class="register">
<form>
<label> First Name:
<input type:"text" name="firstname" id="name">
</label>
<br>
<label>Lastname:
<input type="text" name="lastname" id="name">
</label>
<br>
<label> Email_ID:
<input type="email" name="email" id="email">
</label>
<br>
<label> Password:
<input type="password" name="pwd" id="name">
</label>
<input type="submit" value="submit" name="submit" id="submit">
*{.margin:0
padding:0
box-sizing: border-box;
}
body{
background-position: center;
}
div.main{
width:400;
margin:100;
padding:20;
font-family:sans-serif;
}
div.register{
background-color:#FFFFFF;
width:100;
font-size:18px
border-radius:10px;
}
label{
font-family:sans-serif;
font-size:18px
font-style:arial;
color:#000000;
font-weight:400px
}
input#name{
width:400px
background-color:#FFFFFF;
border-radius:30px
padding:9px;
color:#000080;
}
input#submit{
width:100;
padding:5px;
font-size:16px;
border-radius:3px;
color:#000080;
cursor:pointer;
}