Javascript AJAX jQuery HTML PHP Example MORE

HTML form Tutorial with Example

The HTML <form> is used to collect user input.

An HTML form contains so many form elements.

Form elements are different types of input elements, like text fields, checkboxes, radio buttons, submit buttons, select box and much more.

The <input> Element

The <input> element is one of the most important form element in HTML.

There are several <input> element can be displayed in several ways, depending on the type attribute.

Text Input Example

<!DOCTYPE html>
<html>
<body>
    <form>
        Name:<br>
        <input type="text" name="name">
        <br> Email:
        <br>
        <input type="text" name="email">
    </form>
    <p>Note that the default width of a text input field is 20 characters.</p>
</body> </html>

Run it yourself

Radio Button Input

<input type="radio"> defines a radio button.

Radio button is used to choose one choice from multiple choice.

Example

<!DOCTYPE html>
<html>
<body>
    <form>
        <input type="radio" name="gender" value="male" checked> Male<br>
        <input type="radio" name="gender" value="female"> Female<br>
    </form>
</body>
</html>

Run it yourself

The Submit Button

Submit button is used to submit the form after fill the form by user.

Example

<!DOCTYPE html>
<html>
<body>
	<form method=“post” action=“/action_page.php">First name:<br>
		<input type="text" name="name" value="Divya">
		<br>Last name:<br>
		<input type="text" name="lastname" value=“divyasundar@gmail.com”>
		<br><br>
		<input type="submit" value="Submit">
	</form> 
</body>
</html>

Run it yourself

After click on the submit button. The action work and go for preferred address That we put.

Here action_page.php file is used to process the user data for insert in database.

The Method Attribute

The method attribute specifies the HTTP method (GET or POST) to be used when submitting the form data:

You can use both GET and POST method.

Difference between GET and POST

GET

  1. Show the user data in Url
  2. The length of a URL is limited (about 3000 characters)
  3. Never use GET to send sensitive data!

POST

  1. Never Show the user data in Url
  2. The length of a URL is unlimited
  3. always use GET to send sensitive data!