This website includes Education Information like a programming language, job interview question, general knowledge.mathematics

Education log

PageNavi Results No.

Ads

Friday, July 17, 2020

html form example using validation

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