HTML

Html Form || Html

HTML Form

HTML Form are required when you need to gather a few information from the site.

For instance during client registration you might want to gather data, for example, name, email address,image etc.

The HTML Form consists of some controls which are use to travel information from one page to another.Some main controls are following :

  • Text Input Controls
  • Radio Box Controls
  • Select Box Controls
  • File Select Box
  • Checkbox Controls
  • Submit Button

Html Form Structure:

The HTML Form has opening and closing Tag called “<form>” .In opening Tag we declare action (File name, where information will pass) and method (GET or POST). Inside these Tag,controls will help us to gather information like input,checkbox.As Following Example:

Example#1:

<form action="register.php" method="POST">
Name :<input type="text" name="name">
<br/>
Password :<input type="password" name="password">
<br />
Gender :
<br/>
Male: <input type="radio" name="gender">
Female: <input type="radio" name="gender">
<br/>
Subject:
<br/>
Science :<input type="checkbox" name="Science">
Math :<input type="checkbox" name="Math">
<br />
<input type="submit" value="submit">
</form>

Output:

As we see in above example the input tag has attribute type which specify which controller is using like checkbox,radio etc. POST and GET are two methods of traveling information.

POST:

  • Data is travel as binary data.
  • Data is not cache or stored in history.

GET:

  • Data is travel through address bar,So it can be seen as not secure.

Upload File Html:

Upload a file in HTML form,the attribute type is set to “file” and enctype in form opening Tag is set to “multipart/form-data”. The enctype tells that form consists of file data.

Example #2:

 <form action="register.php" method="post" enctype="multipart/form-data">
    Upload File:
    <input type="file" name="file">
    <input type="submit" value="Submit">
</form>

 

Output:

 

 

Example #3:

Using Form element ,create a menu and user can select only one item.

 <form action="menu.php">
            <select name="dish" >
              <option value="rice">Rice</option>
              <option value="beans">Beans</option>
              <option value="vegetable">Vegetable</option>
              <option value="sweet">Sweet</option>
              <option value="ice-cream">Ice-cream</option>
            </select>
       &lt;input type="submit">
</form>

Output:

HTML Form Attributes:

required Attribute:

Required attribute is make to fill the input field compulsory.

<input type="text" required>

readonly Attribute:

Readonly Attribute will make the input field unchangeable

<input type="text" readonly>

maxlength Attribute:

Maxlength Attribute make the limit on number of characters like 10.

<input type="text" maxlength>



For more Examples Related CSS,html and Java Script Visit on Coding Academics  

Leave a Reply

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