Forms in HTML

In this tutorial all about forms in HTML5 is discussed briefly. Basically there are two parts to a working form. The first part is the form that you see on the page. The other part is a web form is the application on the server that is used to process the information.


Example of form

Get in touch Signup

Join our email list

Get news about webtags.com.pk

Source code of above form


<!DOCTYPE html>
  <html>
    <head>
      <title>Get in touch Signup</title>
      <meta charset="utf-8">
      <style>
      .demo{
        background-color: white;
        padding: 20px;
        margin: 25px;
        border: 1px solid grey;
        outline: 3px solid lightgreen;
        max-height: 400px;
      }
      .demo input{
        margin: 10px;
        border-radius: 5px;
        border-color: lightgreen;
      }
      .demo label{
        margin: 10px;
        border-radius: 5px;
        border-color: lightgreen;
        font-size: 20px;
        font-weight: 300px;
      }
      .demo input:hover{
        background-color: lightgrey;
        border-color: green;
      }
      .s-form:hover{
        cursor: pointer;
      }
      </style>
    </head>
    <body class="demo">
      <h1>Get in touch Signup</h1>
      <form action="#" method="post">
        <legend>Join our email list</legend>
          <p>Get news about webtags.com.pk</p>
          <ol>
            <li>
            <label for="firstlast">
             Name:</label>
            <input type="text" name="username" >
            </li>
            <li>
            <label for="email"> Email:</label>
            <input type="text" name="email"></li>
          </ol>
          <input class="s-form" type="submit" value="Submit">
    </form>
  </body>
</html>

  

Explanation

In this example form element is used which is like a container having various input types. Some input type are used in this example like text, submit etc. The legend element is used for heading. While in the form label and input is used. label is used to define label in form elements and input is used for different input fields. While some styles are also applied.










The Best

Comment here

If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.