HTML Forms are required,
when you want to collect some data from the site visitor. For example, during
user registration you would like to collect information such as name, email
address, credit card, etc.
A
form will take input from the site visitor and then will post it to a back-end
application such as CGI, ASP Script or PHP script etc. The back-end application
will perform required processing on the passed data based on defined business
logic inside the application.
There
are various form elements available like text fields, textarea fields,
drop-down menus, radio buttons, checkboxes, etc.
An HTML form is a
section of a document which contains controls such as text fields,
password fields, checkboxes, radio buttons, submit button, menus etc.
An
HTML form facilitates the user to enter data that is to be sent to the server
for processing such as name, email address, password, phone number, etc.
What is HTML Form :
HTML Form is a document which stores information
of a user on a web server using interactive controls. An HTML form contains
different kind of information such as username, password, contact number, email
id etc.
The elements used in an HTML form are check box,
input box, radio buttons, submit buttons etc. Using these elements the
information of an user is submitted on a web server.
What
are web forms?
Web
forms are one of the
main points of interaction between a user and a web site or application. Forms
allow users to enter data, which is generally sent to a web server for
processing and storage (see Sending form
data later in the module), or used on the client-side to
immediately update the interface in some way (for example, add another item to
a list, or show or hide a UI feature).
A web
form's HTML is made up of one or more form controls (sometimes
called widgets), plus some additional elements to help structure
the overall form — they are often referred to as HTML forms. The
controls can be single or multi-line text fields, dropdown boxes, buttons,
checkboxes, or radio buttons, and are mostly created using the <input> element,
although there are some other elements to learn about too.
Follow the Html Form examplel:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title> Contact us Form </title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<div class="text">
Contact us Form</div>
<form action="#">
<div class="form-row">
<div class="input-data">
<input type="text" required>
<div class="underline">
</div>
<label for="">First Name</label>
</div>
<div class="input-data">
<input type="text" required>
<div class="underline">
</div>
<label for="">Last Name</label>
</div>
</div>
<div class="form-row">
<div class="input-data">
<input type="text" required>
<div class="underline">
</div>
<label for="">Email Address</label>
</div>
<div class="input-data">
<input type="text" required>
<div class="underline">
</div>
<label for="">Website Name</label>
</div>
</div>
<div class="form-row">
<div class="input-data textarea">
<changeit rows="8" cols="80" required></changeit>
<br />
<div class="underline">
</div>
<label for="">Write your message</label>
<br />
<div class="form-row submit-btn">
<div class="input-data">
<div class="inner"></div>
<input type="submit" value="submit">
</div>
</div>
</form>
</div>
<style>
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 40px;
background: linear-gradient(115deg, #56d8e4 10%, #9f01ea 90%);
}
.container{
max-width: 800px;
background: #fff;
width: 800px;
padding: 25px 40px 10px 40px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}
.container .text{
text-align: center;
font-size: 35px;
font-weight: 600;
background: -webkit-linear-gradient(right, #56d8e4, #9f01ea, #56d8e4, #9f01ea);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.container form{
padding: 30px 0 0 0;
}
.container form .form-row{
display: flex;
margin: 32px 0;
}
form .form-row .input-data{
width: 100%;
height: 40px;
margin: 0 20px;
position: relative;
}
form .form-row .textarea{
height: 70px;
}
.input-data input,
.textarea textarea{
display: block;
width: 100%;
height: 100%;
border: none;
font-size: 17px;
border-bottom: 2px solid rgba(0,0,0, 0.12);
}
.input-data input:focus ~ label, .textarea textarea:focus ~ label,
.input-data input:valid ~ label, .textarea textarea:valid ~ label{
transform: translateY(-20px);
font-size: 14px;
color: #3498db;
}
.textarea textarea{
resize: none;
padding-top: 10px;
}
.input-data label{
position: absolute;
pointer-events: none;
bottom: 10px;
font-size: 16px;
transition: all 0.3s ease;
}
.textarea label{
width: 100%;
bottom: 40px;
background: #fff;
}
.input-data .underline{
position: absolute;
bottom: 0;
height: 2px;
width: 100%;
}
.input-data .underline:before{
position: absolute;
content: "";
height: 2px;
width: 100%;
background: #3498db;
transform: scaleX(0);
transform-origin: center;
transition: transform 0.3s ease;
}
.input-data input:focus ~ .underline:before,
.input-data input:valid ~ .underline:before,
.textarea textarea:focus ~ .underline:before,
.textarea textarea:valid ~ .underline:before{
transform: scale(1);
}
.submit-btn .input-data{
overflow: hidden;
height: 45px!important;
width: 25%!important;
}
.submit-btn .input-data .inner{
height: 100%;
width: 300%;
position: absolute;
left: -100%;
background: -webkit-linear-gradient(right, #56d8e4, #9f01ea, #56d8e4, #9f01ea);
transition: all 0.4s;
}
.submit-btn .input-data:hover .inner{
left: 0;
}
.submit-btn .input-data input{
background: none;
border: none;
color: #fff;
font-size: 17px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
cursor: pointer;
position: relative;
z-index: 2;
}
@media (max-width: 700px) {
.container .text{
font-size: 30px;
}
.container form{
padding: 10px 0 0 0;
}
.container form .form-row{
display: block;
}
form .form-row .input-data{
margin: 35px 0!important;
}
.submit-btn .input-data{
width: 40%!important;
}
}
</style>
</body>
</html>
No comments:
Post a Comment