HTML Home
HTML Introduction
HTML Editors
HTML TAGS
HTML Paragraph
HTML Heading
HTML with CSS
HTML Text Formatting
HTML Quotation
HTML Comment
HTML Links
HTML Images
HTML Audio
HTML Video
HTML Tables
HTML Lists
HTML Class
HTML Iframes
HTML File Path
HTML Scripts
HTML Head Section
HTML Structure
HTML Symbols
HTML Character Set
HTML Entity
HTML Color Codes
HTML Forms
HTML Forms
HTML Form Elements
HTML5 Form Element
HTML Form Attributes
HTML Others
HTML Form Elements is most important for an Website. This chapter you can learn about HTML Form Elements.
How to work HTML Form Elements?
HTML Form >> PHP/ASP code (Server based code) >> Database (MySQL, SQL etc)
First HTML Form send data using his Elements to Database using an Server based code like PHP, ASP. Because HTML can't send data to Database direct.
How to User HTML Form Elements?
<form method action and more attributes> <input element here></form>
<!DOCTYPE html> <html> <head> <title>HTML Form Element Tutorials</title> </head> <body> <p>Demo login Form</p> <form name="frm1" method="POST"> <p>Text Box: <input type="text" name="firstName"></p> </form> </body> </html>
Text Box:
List of HTML Form Elements:
1) text - Use for Textbox - <input type="text">
2) password - Use for Password Type - <input type="password">
3) radio - Use for Radio Button - <input type="radio">
4) checkbox - Use for Checkbox - <input type="checkbox">
5) select - Use for Drop down Select - <select><option>Value</option></select>
6) email - Use for Email Type (HTML5) - <input type="email">
7) hidden - Use for Hidden input type - <input type="hidden">
8) textarea - Use for multi text box - <textarea></textarea>
9) submit - Use for Submit Button - <input type="submit">
10) reset - Use for reset Form - <input type="reset">
11) file - Use for File Select - <input type="file">
Examples:
<!DOCTYPE html>
<html>
<head>
<title>HTML Form Elements Tutorials</title>
</head>
<body>
<p>Demo login Form</p>
<form name="frm1" method="POST">
<p>First Name: <input type="text" name="firstName"></p>
</form>
</body>
</html>
First Name:
<!DOCTYPE html>
<html>
<head>
<title>HTML Form Elements Tutorials</title>
</head>
<body>
<p>Demo login Form</p>
<form name="frm1" method="POST">
<p>Password: <input type="password" name="password"></p>
</form>
</body>
</html>
Password:
<!DOCTYPE html>
<html>
<head>
<title>HTML Form Elements Tutorials</title>
</head>
<body>
<p>Demo login Form</p>
<form name="frm1" method="POST">
Favorite Color: Green <input type="radio" name="fcolor"> Red <input type="radio" name="fcolor">
</form>
</body>
</html>
Country: US UK
<!DOCTYPE html>
<html>
<head>
<title>HTML Form Elements Tutorials</title>
</head>
<body>
<p>Demo login Form</p>
<form name="frm1" method="POST">
Favorite Color: Green <input type="checkbox" name="green">
Red <input type="checkbox" name="red">
Blue <input type="checkbox" name="blue">
</form>
</body>
</html>
Double Click to Select Code
Favorite Color: Green Red Blue
<!DOCTYPE html>
<html>
<head>
<title>HTML Form Elements Tutorials</title>
</head>
<body>
<p>Demo login Form</p>
<form name="frm1" method="POST">
Country: <select name="country">
<option>US</option>
<option>UK</option>
<option>CA</option>
</select>
</form>
</body>
</html>
Country:
<!DOCTYPE html>
<html>
<head>
<title>HTML Form Elements Tutorials</title>
</head>
<body>
<p>Demo login Form</p>
<form name="frm1" method="POST">
<p>Email: <input type="email" name="email"></p>
</form>
</body>
</html>
Email:
<!DOCTYPE html>
<html>
<head>
<title>HTML Form Elements Tutorials</title>
</head>
<body>
<p>Demo login Form</p>
<form name="frm1" method="POST">
<p>Hidden Output: <input type="hidden" name="hidNum"></p>
</form>
</body>
</html>
Hidden Output:
<!DOCTYPE html>
<html>
<head>
<title>HTML Form Elements Tutorials</title>
</head>
<body>
<p>Demo login Form</p>
<form name="frm1" method="POST">
<textarea name="Description"></textarea>
</form>
</body>
</html>
Description:
<!DOCTYPE html>
<html>
<head>
<title>HTML Form Elements Tutorials</title>
</head>
<body>
<p>Demo login Form</p>
<form name="frm1" method="POST">
<input type="file" name="file">
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>HTML Form Elements Tutorials</title>
</head>
<body>
<p>Demo login Form</p>
<form name="frm1" method="POST">
<input type="submit" name="submit" value="SAVE">
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>HTML Form Elements Tutorials</title>
</head>
<body>
<p>Demo login Form</p>
<form name="frm1" method="POST">
<input type="submit" name="reset" value="RESET">
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>HTML Form Elements Tutorials</title>
</head>
<body>
<form name="frm1" method="post">
<table width="60%" class="table table-bordered">
<tr>
<td width="30%">Full Name</td>
<td><input type="text" name="fullName"></td>
</tr>
<tr>
<td width="30%">Email</td>
<td><input type="email" name="email"></td>
</tr>
<tr>
<td width="30%">Password</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td width="30%">Gender</td>
<td>Male <input type="radio" name="gender"> Female <input type="radio" name="gender"></td>
</tr>
<tr>
<td>Favorite Color</td>
<td>
Green <input type="checkbox" name="green">
Red <input type="checkbox" name="red">
Blue <input type="checkbox" name="blue">
</td>
</tr>
<tr>
<td>Country</td>
<td>
<select name="country">
<option>US</option>
<option>UK</option>
<option>CA</option>
</select>
</td>
</tr>
<tr>
<td>Photo</td>
<td><input type="file" name="file"></td>
</tr>
<tr>
<td></td>
<td align="center">
<input type="submit" name="submit" value="SAVE">
<input type="submit" name="reset" value="RESET">
</td>
</tr>
</table>
</form>
</body>
</html>
| Full Name | |
| Password | |
| Gender | Male Female |
| Favorite Color | Green Red Blue |
| Country | |
| Photo | |