Form and Validations in HTML using Tables.
Hi, guys in HTML form is the most commonly used element. At most every website having this functionality for interacting with his users. Today in this article we are looking for form tag and its elements and controls in HTML using table. Here we use the table for best alignment or arrangement of table tags for looking good. Ok, let's jump in the tutorial.
 |
| Form Example in HTML |
Actually, we use the form in our HTML document for getting some input from our visitor's like feedback, support, contact form, etc. Take any website this having this functionality. If someone which having form filling in its website so they use form tags to add this functionality in his website.
The <form> tag -
it's very important tag in HTML, it's used for defining the form in HTML. This tag has a closing tag </form>
All the elements and tags are associate with an HTML FORM they are enclose with <form> ... </form> in your HTML web site.
The syntax for form in HTML-
<from>
// some input controls like text box, text area, input, etc.
</from>
Attributes of <from> tag-
Usually, there are two attributes of <form> tag the are namely follows-
1) action-
Here you pass the server URL for sending data to save or process.
2) method-
There are types of methods in form-
i) get- It is appended data of form to URL and reflects in the address bar.
ii) post- It encrypts data and sends to the server.
Tags used in under <from> tag-
1) The <input> tag
2) The <textarea> tag
3) The <lable> tag
4) The <fieldset> tag
5) The <legend> tag
6) The <select> tag
7) The <optgroup> tag
8) The <option> tag
9) The <button> tag
1) The <input> tag-
This is a fundamental tag in the HTML form tag. <imput> tag is used for getting information from the user in input form, <input> tag having its own attributes and their values.
i) type- This attribute specifies the type of input. The values are- text, file, password, email, submit, etc
ii) name- This attribute specifies the name of the tag, for uniquely identifies.
iii) style- This use for providing an internal or inline style in HTML using CSS.
iv) id- This is id attribute used for the selector in CSS.
v) class- This is class attribute used for the selector in CSS.
Syntax:
<body>
<form>
Enter your name <br>
<input type="text" name="name">
</form>
</body>
<body>
<form>
Enter your name <br>
<input type="email" name="email">
</form>
</body>
<body>
<form>
Enter your name <br>
<input type="password" name="password">
</form>
</body>
 |
| Form input text example in HTML |
2) The <textarea> tag-
The <textarea> tag used for getting a huge amount of text like address and all, its having also some attributes.
i) rows- This attribute specifies the rows of the text-area tag.
ii) cols- This attribute specifies the columns of the text-area tag.
iii) id- This is id attribute used for the selector in CSS.
iv) class- This is class attribute used for the selector in CSS.
Syntax:
<html>
<head>
<title>Form in HTML TextArea Tag</title>
</head>
<body>
<form>
Enter your address:<br>
<textarea rows="10" cols="200"></textarea>
</form>
</body>
</html>
 |
| Form Textarea example in HTML |
3) The <lable> tag-
This is optional tag but if we use custom CSS for this tag text so we use this in our HTML code. Its is used for denoting labels (text) in HTML <form> tag.
i) id- This is id attribute used for the selector in CSS.
ii) class- This is class attribute used for the selector in CSS.
Syntax:
<form>
<label for="firstname">Your First Name: </label> <br/>
<input type="text" id="firstnameid" name="firstname"/> <br/>
<label for="lastname">Your Last Name: </label>
<input type="text" id="lastnameid" name="lastname"/> <br/>
</form>
 |
| Form label example in HTML |
4) The <fieldset> tag-
This is a new tag introduced in HTML this will group the information of form and used <legend> tag.
i) id- This is id attribute used for the selector in CSS.
ii) class- This is class attribute used for the selector in CSS.
Syntax:
<form>
<fieldset>
<legend>User Information:</legend>
<label for="name">Enter name</label><br>
<input type="text" id="name" name="name"><br>
<label for="pass">Enter Password</label><br>
<input type="Password" id="pass" name="pass"><br>
<input type="submit" value="submit">
</fieldset>
</form>
5) The <legend> tag-
This tag used for showing the heading for <fieldset> tag.
i) id- This is id attribute used for the selector in CSS.
ii) class- This is class attribute used for the selector in CSS.
Syntax:
<form>
<fieldset>
<legend>User Information:</legend>
<label for="name">Enter name</label><br>
<input type="text" id="name" name="name"><br>
<label for="pass">Enter Password</label><br>
<input type="Password" id="pass" name="pass"><br>
<input type="submit" value="submit">
</fieldset>
</form>
 |
| Form legend example in HTML |
6) The <select> tag-
The <select> tag is used for displaying drop-down list to the user from that he can choose one option or multiple from the dropdown list.
i) id- This is id attribute used for the selector in CSS.
ii) class- This is class attribute used for the selector in CSS.
7) The <optgroup> tag-
i) id- This is id attribute used for the selector in CSS.
ii) class- This is class attribute used for the selector in CSS.
8) The <option> tag-
The <option> tag is used to create or feed the data into <select> tag. In <select> tag for desplaying drop down list data this tag is used.
i) id- This is id attribute used for the selector in CSS.
ii) class- This is class attribute used for the selector in CSS.
9) The <button> tag-
This is a new HTML tag used for creating a button in HTML.
i) id- This is id attribute used for the selector in CSS.
ii) class- This is class attribute used for the selector in CSS.
Final Example:
<html>
<head>
<title>Form in HTML</title>
</head>
<body>
<h2>Registration form</h2>
<form>
<fieldset>
<legend>User personal information</legend>
<label>Enter your full name</label><br>
<input type="text" name="name"><br>
<label>Enter your email</label><br>
<input type="email" name="email"><br>
<label>Enter your password</label><br>
<input type="password" name="pass"><br>
<label>confirm your password</label><br>
<input type="password" name="pass"><br>
<br><label>Enter your gender</label><br>
<input type="radio" id="gender" name="gender" value="male"/>Male <br>
<input type="radio" id="gender" name="gender" value="female"/>Female <br/>
<input type="radio" id="gender" name="gender" value="others"/>others <br/>
<br>Enter your Address:<br>
<textarea></textarea><br>
<input type="submit" value="sign-up">
</fieldset>
</form>
</body>
</html>
 |
| Form Example |
0 Comments