HTML Form Elements or Input Elements:
HTML (Hyper Text Markup Language) provide the flexibility to create interactive html forms and make it useful with html form elements or attributes. HTML form input elements is really finest and advantageous step during making html form.This lesson belongs to the previous lesson such as, we learned in earlier lesson about “How to Create interactive html form” So, if you’re not aware with the previous lesson then read this first. In this lesson, We will disclose to html form input elements or attributes. So before go ahead, We want to clarify few things. We will discuss and read about major html form input elements. So, Crucial html form input elements are given below.
- Text-Box
- Button
- Check-boxes
- Radio Button
- File Choose Field
- Date Control
Text-Box Element:
HTML allows to add multiple appropriate text-boxes in own html forms. Usually we saw that,First name, Last name and email text boxes appear in the html forms. To build and develop these text box, We need to write particular html code. See the code below and its result.
<input type="text" name="firstname" value="First name"><br> <input type="text" name="lastname" value="First name"><br>
See the above text boxes code result below.
You can easily change input type text to password for password box. Because password type hide your characters and make it private. To understand password type criteria. See the code below.
<input type="Password" name="Password" value="Password">
Button Element:
HTML allows us to add buttons and customize its text. To create buttons in html, We need to write specific html code. See the example below and its result.
| HTML Code | Result |
|---|---|
| <input type=”Button” value=”Click Here”> |
Check-Boxes Elements:
Check boxes is an essential element or attribute of html forms. Because if we need choose something else from sum of multiple things so we utilize check boxes. See the example below and its results.
<input type="Checkbox" name="Month" value="January"> Ali birthday in january<br> <input type="Checkbox" name="Month" value="June"> Ali birthday in june<br> <input type="Checkbox" name="Month" value="July"> Ali birthday in june<br> <input type="Checkbox" name="Month" value="August"> Ali birthday in August<br>
See the above html check boxes code result below.
Radio Button Element:
Check boxes and radio buttons have same work and criteria. But it depends on your choice that which will you pick for your own form. Radio button code is same like check boxes code. Only the change in input type section. Just replace Checkbox type to radio. To understand in better way, See the below code and its results.
| HTML Code | Result |
|---|---|
| <input type=”radio” name=”Gender” value=”Male”>Male<br> <input type=”radio” name=”Gender” value=”Female”>Female<br> |
Male Female |
File Choose Filed:
Often, We see this element in forms like for image or any doc file upload. So it it is important part in form elements. See the below html code and its result.
| HTML Code | Result |
|---|---|
| <input type=”file” name=”doc”> |
Date Element:
In html form elements, We can develop date calendar. Its not consist of huge code but its have a single line code. You can utilize this elements many of places like ask birthday, ask day,year,month etc. See the below html code and its result.
Date: <input type="Date" name="Date">
See the above date element code preview below.
Hopefully, After read these html form elements now you can engage and develop form attributes easily. Must do practice itself. Keep remember that, date element doesn’t support all browser so don’t be confused. Try Google Chrome because it is compatible mostly for all html elements and user-friendly. I suggest you to read “HTML 5 Basic tags” to increase your html and development knowledge.You can leave your comment below, If you found any error or bug during practice. 🙂
