saftutorials.com
HTML Forms Tutorial

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>

Basic Structure of HTML 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:


HTML Form Attributes Introduce

HTML form attributes important for HTML form. There are have many type attributes of HTML Form.

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>

HTML Form with Form Attributes

<!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 Introduce

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

HTML Form with GET Method

<!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>

Login Form

Username:

Password:  

Find us on

Facebook Google Plus Twitter Pinterest YouTube

web statistic