HTML Tutorial #5: Create a form.
In the previous tutorial we have created a table using <table> further we will create a form.
What is form in HTML?
=> HTML form is a HTML element in which stores information of a user on web server. HTML forms contains different kinds of user inputs like name, father's name, email is, contact number.
How to create form in HTML?
=> HTML form are created a form using <form> tag. Forms contain special element like input box, check box, radio buttons, submit buttons etc,
Now, first we will create a form in which name, father's name and mother's name field.
Open your Notepad and type:
<!DOCTYPE html>
<html>
<head>
<title> Table </title>
</head>
<body>
<form>
Name: <br>
<input type="text" name="name"> <br>
Father's Name: <br>
<input type="text" name="name"> <br>
Mother's Name: <br>
<input type="text" name="name"> <br><br>
<input type="submit" value="submit">
</form>
</body>
</html>
* input element is the most important element, text fields are one line areas that allows the user to input text. And submit is submit button which submits form values.
Save this page with .html or .htm extension. open your browser.
Now your simple web form is ready.
HTML form using check box and radio button.
Again go your Notepad and add the following code between <form> tag.
<!DOCTYPE html>
<html>
<head>
<title>Table</title>
</head>
<body>
<form>
Name: <br>
<input type="text" name="name"> <br>
Father's Name: <br>
<input type="text" name="name"> <br>
Mother's Name: <br>
<input type="text" name="name"> <br><br>
Subject: <br>
<input type="checkbox" name="subject" value="gender"> Java
<input type="checkbox" name="subject" value="gender1"> PHP
<input type="checkbox" name="subject" value="gender2"> Python <br>
Gender: <br>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="male"> Female
<input type="radio" name="gender" value="male"> Others <br><br>
<input type="submit" value="submit">
</form>
</body>
</html>
Here easily you can find the difference between check box and radio button. Check box allows the user to select one or more option but radio button allows the user to select only one option.
HTML form using check box, radio button with password and textarea.
Go back in your Notepad and type:
<!DOCTYPE html>
<html>
<head>
<title>Table</title>
</head>
<body>
<form>
Name: <br>
<input type="text" name="name"> <br>
Father's Name: <br>
<input type="text" name="name"> <br>
Mother's Name: <br>
<input type="text" name="name"> <br><br>
Subject: <br>
<input type="checkbox" name="subject" value="gender"> Java
<input type="checkbox" name="subject" value="gender1"> PHP
<input type="checkbox" name="subject" value="gender2"> Python <br><br>
Gender: <br>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="male"> Female
<input type="radio" name="gender" value="male"> Others <br><br>
Password:
<input type="password" name="pwd"> <br><br>
Conform Password:
<input type="password" name="pwd">
<br><br>
Comment:
<textarea type="text"></textarea> <br><br>
<input type="submit" value="submit">
</form>
</body>
</html>
We know that when we fill our form then in password option no characters are visible only we can see ....... or ******* . So we use <input> tag with type attribute as a password.
And textarea is a multi-line text input in which we can fill unlimited character.
Finally using the above process in HTML we can create a form like Contact form, Registration form, Log-in form, Acknowledge form etc.
In the next tutorial we will see How to insert an image in HTML element.
Comments
Post a Comment