HTML Tags : Part 4 What are HTML Forms Tags?

, , ,

 
 
HTML Tags Part IV
What are HTML Forms Tags?
As we already discussed about HTML Tags earlier. Now we are going to discuss each of Tags step by step in details with practical.
Here you can check the format of HTML code which looks likes: 
Format of Code:
<!DOCUMENT HTML>
<html>
<head>
<title></title>
</head>
<body>
----rest document code----
</body>
</html>
In this HTML Tags Part IV we are going to discuss about very interesting tags which are important to design a Web Page and get information about users in HTML. These tags will help us to create forms in document which are useful to get information from users.
In this post we will describe 1 types of HTML tags:
  • HTML Forms Tags
So let’s start.

HTML Form TAGS
HTML forms will allow you to take input from user. Input can be name or password or any data which you want to take from user. I.e. register form, login form, survey form etc.
Tag
Tag Name
Description
<form>
Form tag
Its define the user form
<input>
Input tag
Its define a input area
<textarea>
Text area tag
Its define a text area
<button>
Button tag
Its defin a button
<select>
Select tag
Its defn a drop-down list
<optgroup>
OptionGroup tag
Define group relates to drop-down list
<option>
Option tag
Defines an option for drop down list
<label>
Label tag
Define a label
<fieldset>
Field set tag
Its define group related elements
<legend>
Legend tag
Define a caption
<datalist>
Datalist tag
Define option for pre-define in list
<output>
Output tag
Define a result of a calculation
Important Notes and Tips:

  • To create a form we use <form> tag and define the elements inside it. A form can use two methods mainly they are “GET” and “POST” method.
    • Get method will allow you to access data from database and show to your HTML document.
    • POST method will allow you to get data from user and shave it to your database.
Presentation of code:
<form>
…….
…….
</form>
  • In <input> you are alowing user to input their details. It can be a Name or password or so on. The attributes of input tags are helping you to control your input element. Like: how many character you want to allow. Or input will be a text or a password or mail or number. Or take a placeholder which indicates user that input type is for which use.
The different input types are as follows:
<input type="text"> (default value)

<input type="button">

<input type="checkbox">

<input type="color">

<input type="date">

<input type="datetime-local">

<input type="email">

<input type="file">

<input type="hidden">

<input type="image">

<input type="month">

<input type="number">

<input type="password">

<input type="radio">

<input type="range">

<input type="reset">

<input type="search">

<input type="submit">

<input type="tel">

<input type="time">

<input type="url">

<input type="week">
Presentation of code:
<input type=”text” placeholder=”Your Name” maxlength=20>
  • <textarea> allows you to enter multiple lines. Its use to add comments or message box or review box. You can control number of text by defining attribute “maxlength”
Presentation of code:
<textarea maxlength=160, placeholder=”Your Message”></textarea>
  • <button> used to “submit” or “reset” of form or any other places where you can put it.
Presentation of code:
<input type=”button” value=”Submit” name=”Submit”>
Or
<button>Submit</button>
  • <select> Tag is used to create drop-down list. Its another way to take user input.
Presentation of code:
<select name="colours" id="colours">
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="yellow">Yellow</option>
  <option value="black">Black</option>
</select>
  • <optgroup> is used to group same category data in dropdown list.
Presentation of code:
<label for="animals">Choose a Animal:</label>
<select  name="animal" id="animal">
  <optgroup label=”Fish">
    <option value="gfish">Golden Fish</option>
    <option value="sfish">Star Fish</option>
  </optgroup>
  <optgroup label="Animal">
    <option value="lion">Lion</option>
    <option value="fox">Fox</option>
  </optgroup>
</select>
  • <option> is used to make selection between two or more. Earlier we used “Radio button” instead.
Presentation of code:
<label for="animals">Choose a Animal:</label>

<select id="cars">
  <option value="lion">Lion</option>
  <option value="fox">Fox</option>
  <option value=tiger">Tiger</option>
  <option value="snake">Snakes</option>
</select>
  • <label> element is generly uses as a screen reader for users. It allow you to read pre-define texts.
Presentation of code:
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">
  • The <fieldset> tag is used to group related elements in a form. The <fieldset> tag draws a box around the related elements.
Presentation of code:
<fieldset>
    <legend>Personalia:</legend>
    <label for="fname">First name:</label>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="lname">Last name:</label>
    <input type="text" id="lname" name="lname"><br><br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br><br>
    <label for="birthday">Birthday:</label>
    <input type="submit" value="Submit">
  </fieldset>
  • <legend> tag defines a caption for the <fieldset> element.
Presentation of code:
<fieldset>
    <legend>Personalia:</legend>
    <label for="fname">First name:</label>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="lname">Last name:</label>
    <input type="text" id="lname" name="lname"><br><br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
  • <datalist> are pre-defin optons for an input. Its allow to use autofill feature in your form.
  • You have to define keywords in datalist for a input element.


Presentation of code:
<input list="browsers" name="browser" id="browser">

<datalist id="browsers">
  <option value="Edge">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">

  • <output> tag is used to represent the result of a calculation (like one performed by a script).
Presentation of code:
<input type="range" id="set1" value="15">
  +<input type="number" id="set2" value="15">
  =<output name="retn" for="set2 set2"></output>

Some common attributes for all elements are:
  • Width : allow to set width of your element.
  • Height : allow to set height of your element.
  • Placeholder : allow you to set a caption text to your element.
  • Readonly : not allow user to make any changes.
  • Disable : specify the element should be disable.
There are so many properties which you can learn by keep practicing the code.
Lets Checkout this example:
Code:
Sample Code

 

Result:


In below example we make a simple registration form user:
In this example we designed a form with user details along with checkbox and radio button. 
Code:
<!DOCTYPE html>
<html>
<head>
            <title>Registration Form</title>
</head>
<body>
<form>
            <fieldset>
                        <legend>Share Your Details:</legend>
                        <input type="text" placeholder="UserName"><br><br>
                        <input type="password" placeholder="Create Your Password"><br><br>
                        <input type="E-Mail" placeholder="Your E-Mail"><br><br>
                        Date of Birth:<br>
                        <input type="date" placeholder="Your Date of Birth"><br><br>
                        Your Hobbies:<br>
                        <input type="checkbox" id="sports" name="sports" value="Football">
                        <label for="sports"> I Love Football</label><br>
                        <input type="checkbox" id="movies" name="Movies" value="Movies">
                        <label for="movies"> I Love to watch Movies</label><br>
                        <input type="checkbox" id="art" name="art" value="Painting">
                        <label for="art"> I Love Painting</label><br>
                        <input type="checkbox" id="ride" name="ride" value="HourseRiding">
                        <label for="art"> I Love Hourse Riding</label><br>
                        <input type="checkbox" id="games" name="games" value="ComputerGames">
                        <label for="art"> I Love to play Computer Games.</label><br><br>
                        Gender:<br>
                        <input type="radio" id="male" name="gender" value="male">
                        <label for="male"> Male</label><br>
                        <input type="radio" id="female" name="gender" value="female">
                        <label for="female"> Female</label><br><br>
                        Address:<br>
                        <textarea placeholder="Your Home Address"></textarea><br><br>
                        <button>Submit</button>
                        </fieldset>
</form>
</body>
</html> 
Result:


That's all for now in next article we will discuss about more HTML tags. Please feel free to ask your queries in comment section.

References:


By at
Tags: , , ,

20 comments:

  1. Krazy~30 June 2020 at 06:41

    I find your explanation very easy to understand - just like a teacher. Good effort 👍

    ReplyDelete
  2. jasminerico@flexservhost.com30 June 2020 at 07:49

    Highly informative and very helpful. Thank you for sharing this post.

    ReplyDelete
  3. Rev30 June 2020 at 08:09

    You explain so well.. thanks

    ReplyDelete
  4. Healthfits30 June 2020 at 10:14

    Very good sir... Information is really good

    ReplyDelete
  5. Ashish Gupta30 June 2020 at 16:28

    Well explained I will use some codes

    ReplyDelete
  6. Smita30 June 2020 at 17:28

    Informative from the point of view of web designer 😊

    ReplyDelete
  7. Shiv Singh1 July 2020 at 08:34

    Very nicely explained and cleared my doubts

    ReplyDelete
  8. Well thought gift1 July 2020 at 10:31

    V n article

    ReplyDelete
  9. Neelam1 July 2020 at 10:48

    thank u for this blog it is very useful for those who are not aware about HTML language

    ReplyDelete
  10. Smita1 July 2020 at 11:17

    Informational🌹

    ReplyDelete
  11. Maze2 July 2020 at 20:04

    Helpfull blog AJ

    ReplyDelete
  12. Online knowledge3 July 2020 at 10:02

    Very helpful and informative article, it will help a lot

    ReplyDelete
  13. Dinesh7ram3 July 2020 at 10:14

    Nice work bro, keep doing.

    ReplyDelete
  14. Nikhil Kumar3 July 2020 at 19:35

    Keep sharing bro

    ReplyDelete
  15. Maze4 July 2020 at 15:08

    very good and easy

    ReplyDelete
  16. Nilakshi Garg6 July 2020 at 09:18

    Nice information there dear!!

    ReplyDelete
  17. Kord Blog11 July 2020 at 03:14

    Very detailed, I like it. Keep up this good work.

    ReplyDelete
  18. ovasabi.com.ng30 July 2020 at 14:00

    I see the relationship between what I see on my blog and the HTML code, especially forms as explained in this post. This is quite enlightening.

    ReplyDelete
  19. Sneharika Sharma2 August 2020 at 09:31

    Well informed about HTML

    ReplyDelete
  20. Student World19 August 2020 at 06:13

    One can easily understand about HTML now.

    ReplyDelete

Subscribe to: Post Comments (Atom)

INSTAGRAM FEED

@soratemplates