How to gathering input in html ?

How to gathering input in html ?

In this paragraph we are going to discuss about, on how to gathering input In html. Usually we use the input to get all kinds of users informations. For example the name, email, password, date of birth and so on. To create input element, we use the empty tag <input>.

Input need attributes to work properly. In html input can hold a lot of attributes we will list some of them.

PlaceHolder: This attribute hints at what a user should type into the fields.

<!Doctype html>
  <html>
    <head>
           <title> My webpage </title>
     </head>
     <body>
        <h1> My input </h1>
             <input placeholder=Your name">
            <input placeholder="Your email">
            <input placeholder="your phone number">


      </body>
   </html>
...

Input type: the type specifies the kind of input we are collecting. It is important to always specify the input type. Above all the input type helps for clientinput validation or form validation. We will talk about more later.

<!Doctype html>
  <html>
    <head>
           <title> My webpage </title>
     </head>
     <body>
        <h1> My input </h1>
             <input placeholder=Your name" type="text">
      <input placeholder="Your phone number" type="number">
      </body>
   </html>

Input can hold different attributes types as : text, email, range, checkbox, number, color, date. The default value of type is: type =”text”

<!Doctype html>
  <html>
    <head>
           <title> My webpage </title>
     </head>
     <body>
        <h1> My input types </h1>
             <input  type="text">
             <input  type="date">
            <input  type="color">
             <input  type="checkbox">
             <input  type="email">
             <input  type="range">
             <input  type="number">

      </body>
   </html>

Example

form input
Input_form.img

Leave a Reply

Your email address will not be published. Required fields are marked *

Follow by Email
LinkedIn
LinkedIn
Share
Instagram
error: Content is protected !!