•What is HTML form
•The Syntax
•Conclusion
What is HTML Form
HTML form are needed to get any kind of user's details such as their name, email, address, phone numbers e.t.c Form contains special elements known as controls such as inputbox, the checkbox, the radio buttons, the submit button and so on. User's usually complete the form by modifying the control either by selecting or entering text and then submit to the server for other processes.
The Syntax
The <form> tag is used to create an HTML form. Here is a typical example of a HTML form:
<form>
<label="first name">
First name:</label>
<input type="text" id="fname"
<br>
<label for="last name"> last name</label>
<input type="text" id="lname"><br>
<button>Login</button>
</form>
Controls You can use When creating your Form
The Input Element
This is a widely used Element in HTML forms. It helps in specifying the various types of user input fields depending on the type features. Input elements can be in form of the text fields, username, password, checkbox, radio buttons and so on...
Inputs Elements
- Text Fields Text fields are the areas that makes the user to type in text.
Single-line text input controls are created using an <input>element, whose type attribute has a value of text. Here's a practical example of a single-line text input used to take a username:
<form>
<label for="username">Username:</label>
<input type="text" name="username" id="username">
</form>
And the output will show something like this
Username:- The Password Field
Password fields are similar to text fields. The only difference is that characters in a password field are masked, they are not visible .i.e. they are shown as asterisks or dots. This is to prevent someone else from reading the password on the screen. This is also a single-line text input controls created using an
<input>element whose type attribute has a value ofpassword
Here's also an example of a single-line password input used to collect user password:
<form>
<label for="user-pwd">Password:</label>
<input type="password" name="user-password" id="user-pwd">
</form>
And the output will be:
- HTML Password Input Field
Radio Buttons
Radio buttons are used to let the user select exactly one option fron undefined set of options. It is done using an element whose
typeattribute has a value of radio.
Here's an example of radio buttons that can be used to collect user's gender information:
<form>
<input type="radio" name="gender" id="male">
<label for="male">Male</label>
<input type="radio" name="gender" id="female">
<label for="female">Female</label>
</form>
Conclusion
If you want to know more about the input elements, stay tune to my blog and watch out for the second part of creating HTML Form..