HTML FORM

An HTML form is a section of a document which contains controls such as text fields, password fields, checkboxes, radio buttons, submit button, menus etc.

Html Forms are required if you want to collect data from the user

Example

<html>
<head>
<title>form</title>
</head>
<body>
<form>
<label>Enter your name</label>
<input type="text">
</form>
</body>
</html>

Output


Form Tags

Tags Description
<form> It defines an HTML form to enter inputs by the used side.
<input> It defines an input control.
<textarea> It defines a multi-line input control.
<label> It defines a label for an input element.
<select> It defines a drop-down list.
<option> It defines an option in a drop-down list..
<radio> Displays a radio button (for selecting one of many choices)
<checkbox> Displays a checkbox (for selecting zero or more of many choices)
<button> It defines a clickable button.

Form Input Element

Form Input element is used to take input from the user.We can apply different input filed to gather different information form user. Following is the example to show the simple text input.

<html>
<head>
<title>form</title>
</head>
<body>
<form>
<label>Enter First Name</label>
<input type="text">
<label>Enter Last Name</label>
<input type="text">
</form>
</body>
</html>

Output



Password Field Control

Password control is used to take input from the user.The password is not visible to the user in password field control.

<html>
<head>
<title>form</title>
</head>
<body>
<form>
<label>Enter First Name</label>
<input type="text">
<label>Enter password</label>
<input type="password">
</form>
</body>
</html>

Output


Email Field

Email Field is used to take input from the user.The email field in new in HTML 5. It validates the text for correct email address. You must use @ and . in this field..

<html>
<head>
<title>form</title>
</head>
<body>
<form>
<label>Enter Name</label>
<input type="text">
<label>Enter E-mail</label>
<input type="email">
<input type="submit" name="SUBMIT">
</form>
</body>
</html>

Output



Textarea

The <textarea> tag in HTML is used to insert multiple-line text in a form. The size of <textarea> can be specify either using "rows" or "cols" attribute or by CSS.

<html>
<head>
<title>form</title>
</head>
<body>
<form>
<label>Enter your address:</label>
<textarea rows="2" cols="20">
</textarea>
</form>
</body>
</html>

Output
form

Radio Button

Radio buttons are used when out of many options, just one option is required to be selected. They are also created using HTML <input> tag but type attribute is set to radio

<html>
<head>
<title>form</title>
</head>
<body>
<form>
<label>Select your fav subject</label>
<input type="radio" name="r1">Math
<input type="radio" name="r1">English
<input type="radio" name="r1">science
</form>
</body>
</html>

Output
Math English science

Checkbox

<html>
<head>
<title>form</title>
</head>
<body>
<form>
<label>Select your fav subject</label>
<input type="checkbox" name="c1">Math
<input type="checkbox" name="c2">English
<input type="checkbox" name="c3">science
</form>
</body>
</html>

Output

Math English science

Date

<html>
<head>
<title>form</title>
</head>
<body>
<form>
<label>Enter your Date-Of-Birth</label>
<input type="date"
</form>
</body>
</html>

Output

Number

<html>
<head>
<title>form</title>
</head>
<body>
<form>
<label>Enter your age</label>
<input type="number" min="18" max="60" >
</form>
</body>
</html>

Output

color

<html>
<head>
<title>form</title>
</head>
<body>
<form>
<label>Select your fav color</label>
<input type="color">
</form>
</body>
</html>

Output

Select

<html>
<head>
<title>form</title>
</head>
<body>
<form>
<label>select your payment method</label>
<select> <option>Paytm</option>
<option>Cash</option>
<option>Credit-Card</option>
<option>Gpay</option>
</select> </form>
</body>
</html>

Output

URL

<html>
<head>
<title>form</title>
</head>
<body>
<form>
<label>Enter url</label>
<input type="url">
<input type="submit" name="submit">
</form>
</body>
</html>

Output

range

<html>
<head>
<title>form</title>
</head>
<body>
<form>
<label>show range</label>
<input type="range">
</form>
</body>
</html>

Output

Field-level-validation

Reqired

<html>
<head>
<title>form</title>
</head>
<body>
<form>
<label>Enter your Name</label>
<input type="text" required="true">
<input type="submit" name="submit">
</form>
</body>
</html>

Output

autofocus

<html>
<head>
<title>form</title>
</head>
<body>
<form>
<label>Enter your Name</label>
<input type="text" autofocus="on">
<input type="submit" name="submit">
</form>
</body>
</html>

Output

placeholder

<html>
<head>
<title>form</title>
</head>
<body>
<form>
<label>Enter your Name</label>
<input type="text" placeholder="Enter your name">
<input type="submit" name="submit">
</form>
</body>
</html>

Output

Form Using Table

<html>
<head>
<title>form</title>
</head>
<body>
<table>
<form>
<tr>
<td><lab el>Enter your Name</label></td>
<td><input type="text" placeholder="Enter your name"></td>
</tr>
<tr> <td><label>Enter password</label></td>
<td><input type="password"></td>
</tr>
<tr> <td><label>Enter e-mail address</label></td>
<td><input type="email"></td>
</tr>
<tr> <td><label>Enter Address</label></td>
<td><textarea></textarea></td>
</tr>
<tr> <td><label>Enter date-of-birth</label></td>
<td><input type="date"></td>
</tr>
<tr> <td><label>Enter age</label></td>
<td><input type="number" min="18" max="60"></td>
</tr>
<tr> <td><label>Enter mobile no.</label></td>
<td><input type="tel" maxlength="10"></td>
</tr>
<tr> <td><label>Enter password</label></td>
<td><input type="password"></td>
</tr>
<tr> <td><label>Select your fav subject</label></td>
<td><input type="radio" name="r1">Math
<input type="radio" name="r1">English
<input type="radio" name="r1">science</td>
</tr>
<tr>
<td><label>Select your fav subject</label></td>
<td><input type="checkbox" name="c1">Math
<input type="checkbox" name="c2">English <input type="checkbox" name="c3">science</td> </tr>
<tr>
<td><label>select your payment method</label>
</td> <td><select> <option>Paytm</option>
<option>Cash</option>
<option>Credit-Card</option>
<option>Gpay</option>
</td> </select></tr>
<tr>
<td><input type="submit" name="SUBMIT"></td>
<td><input type="reset" name="RESET"></td
</tr>
</form>
</table>
</body>
</html>

Output
Enter your Name
Math English science
Math English science

Assignment


1)Create form using css and table
form1