HTML Forms

HTML forms are created using the <form> element, and they consist of various form elements such as text fields, radio buttons, dropdown lists, and buttons. Each form element is represented by an HTML tag (e.g., <input>, <select>, <textarea>) with specific attributes to define its behavior and appearance.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample Form</title>
</head>
<body>

    <form action="/submit" method="post">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" required>

        <br>

        <label for="password">Password:</label>
        <input type="password" id="password" name="password" required>

        <br>

        <input type="submit" value="Submit">
    </form>

</body>
</html>

You can click on above box to edit the code and run again.

Output

The <form> element wraps the entire form and specifies the action attribute (the URL where the form data should be sent) and the method attribute (the HTTP method, such as "get" or "post").
<lable> elements provide labels for form controls, enhancing accessibility.
<input> elements are used for text input and password input. The type attribute specifies the type of input.
The required attribute is used to indicate that the input fields must be filled out before submitting the form.
The <input> with type="submit" creates a submit button.

Form data is typically sent to the server using the HTTP POST method when the form is submitted. The server then processes the data and responds accordingly.

HTML forms can be extended with additional features, such as client-side validation using JavaScript, styling with CSS, and integration with server-side technologies (e.g., PHP, Python, Ruby) to handle form submissions. The handling of form data on the server side involves processing the input and responding to the user or updating server-side data accordingly.

The <form> Element

The <form> element in HTML is used to create an HTML form that allows users to input data and submit it to a server for processing. Forms are a fundamental part of web development, enabling user interaction and data submission. The <form> element can contain various form elements like text fields, checkboxes, radio buttons, dropdown lists, and buttons.

Example


<form>
.
form elements
.
</form>

You can click on above box to edit the code and run again.

Output

The <input> Element

The <input> element is the most used form element.

An <input> element can be displayed in many ways, depending on the type attribute.

Type	Descriptions
<input type="text">	Displays a single-line text input field;
<input type="radio">	Displays a radio button (for selecting one of many choices)
<input type="checkbox">	Displays a checkbox (for selecting zero or more of many choices)
<input type="submit">	Displays a submit button (for submitting the form).
<input type="button">	Displays a clickable button

Text Fields

Here is the basic syntax of the <input> element:

The <input type="text"> defines a single-line input field for text input.

Example

    <form>
   <label for="fname">First name: </label> <br>
   <input type="text" id="fname" name="fname"> <br>
   <label for="lname">Last name: </label> <br>
   <input type="text" id="lname" name="lname">
 </form>

You can click on above box to edit the code and run again.

Output

The <label> Element

Notice the use of the <label> element in the example above.

The <label> tag defines a label for many form elements.

The<label> element is useful for screen-reader users, because the screen-reader will read out loud the label when the user focuses on the input element.

The <label> element also helps users who have difficulty clicking on very small regions (such as radio buttons or checkboxes) - because when the user clicks the text within the <label> element, it toggles the radio button/checkbox.

The for attribute of the<label> tag should be equal to the id attribute of the element to bind them together.

Radio Buttons

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

Radio buttons let a user select ONE of a limited number of choices.

Here are examples of different <input> types:

Text input

<form>
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label>vbr>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label>
</form>

Output

You can click on above box to edit the code and run again.

Output

The Submit Button

The <input type="submit"> defines a button for submitting the form data to a form-handler.

The form-handler is typically a file on the server with a script for processing input data.

The form-handler is specified in the form's action attribute.

Example

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
 <input type="submit" value="Submit">
</form>

You can click on above box to edit the code and run again.

Output

The Name Attribute for <input>

Notice that each input field must have a name attribute to be submitted.

If the name attribute is omitted, the value of the input field will not be sent at all.

Example

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
 <input type="text" id="fname" value="John"><br><br>
  <input type="submit" value="Submit">
</form>

Output

You can click on above box to edit the code and run again.