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 is most important for an Website. HTML Form using for Data submit to database, Signup, Sign in, Search, Contact and more place. The all database program use by Form.
How to work HTML Form?
HTML Form >> PHP/ASP code (Server based code) >> Database (MySQL, SQL etc)
First HTML Form send data to Database using an Server based code like PHP, ASP. Because HTML can't send data to Database direct.
How to Create HTML Form?
1) First create form tag <form></form>
2) Second write your needed input elements in form tag <form><input elements></form>
<form method action and more attributes> <input element here></form>
<!DOCTYPE html> <html> <head> <title>HTML Form Tutorials</title> </head> <body> <p>Demo login Form</p> <form name="frm1" method="POST"> <p>Username: <input type="text" name="username"></p> <p>Password: <input type="password" name="password"></p> <p><input type="submit" name="submit" value="LOGIN"></p> </form> </body> </html>
Demo login Form
Username:
Password:
List of HTML attribute:
1) name - For use Form name - <form name="formName"> Form Elements </form>
2) id - For use Form id - <form id="formID"> Form Elements </form>
3) action - For use another action page - <form action="actionpage.php"> Form Elements </form>
4) target - For use open action page in new window - <form target="_blank"> Form Elements </form>
5) method- For use Form method - <form method="POST or GET"> Form Elements </form>
6) enctype - For use encrypt type file open - <form enctype="multipart/form-data"> Form Elements </form>
7) class - For use declare css class - <form class="class name"> Form Elements </form>
8) style - For use inline css code - <form style="CSS code here"> Form Elements </form>
<!DOCTYPE html>
<html>
<head>
<title>HTML Form Tutorials</title>
</head>
<body>
<p>Demo login Form</p>
<form name="frm1" id="frm1" method="POST" action="login.php" target="_blank" class="formClass" enctype="multipart/form-data">
<p>Username: <input type="text" name="username"></p>
<p>Password: <input type="password" name="password"></p>
<p><input type="submit" name="submit" value="LOGIN"></p>
</form>
</body>
</html>
Demo login Form with form attribute
Username:
Password:
HTML Form method two type
1) POST method
2) GET method
POST method - If you don't want generate URL after form submit then you can use this method.
OUTPUT: actionpage.php no url generate
GET method - If you want generate URL after form submit then you can use this method.
OUTPUT: actionpage.php?key1=value1&key2=value2&key3=value3&button=buttonName
<!DOCTYPE html>
<html>
<head>
<title>HTML Form Tutorials</title>
</head>
<body>
<p>Demo login Form</p>
<form name="frm1" method="GET" action="login.php" target="_blank">
<p>Username: <input type="text" name="username"></p>
<p>Password: <input type="password" name="password"></p>
<p><input type="submit" name="submit" value="LOGIN"></p>
</form>
</body>
</html>
Demo login Form
Username:
Password:
<!DOCTYPE html>
<html>
<head>
<title>HTML Form with Fieldset</title>
</head>
<body>
<div class="safout"></div>
<fieldset>
<legend>Login Form</legend>
<form name="frm1" method="POST">
<p>Username: <input type="text" name="username"></p>
<p>Password: <input type="password" name="password"></p>
<p><input type="submit" name="submit" value="LOGIN"></p>
</form>
</fieldset>
</body>
</html>
