HTML Forms

HTML forms are a crucial part of web development, allowing users to input data and interact with a web page. Forms provide a way for users to submit data to a server for processing. Common use cases for HTML forms include user authentication, search functionality, feedback submission, and various types of data collection.

HTML forms are created using the <form> element, and they consist of various form elements such as text fields, radio buttons, checkboxes, 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 in HTML is a versatile form control that allows users to enter data. It is used to create various types of interactive fields, such as text boxes, checkboxes, radio buttons, and buttons within an HTML form. The specific behavior of the <input> element is determined by its type attribute.

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

Example

    
<input type="text" name="username" id="username" value="Default Value">

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

Output

type attribute

Specifies the type of input field. Common values include:

"text": A single-line text input field.
"password": A password input field where the entered characters are typically masked.
"checkbox": A checkbox for boolean (true/false) input.
"radio": A radio button for selecting one option from a group of options.
"submit": A submit button to submit the form.
"reset": A reset button to reset the form to its default values.
"button": A generic button that can be used with JavaScript for custom behavior.

name attribute:

Specifies the name of the input field. This is used to identify the input when the form is submitted.

id attribute:

Specifies a unique identifier for the input field. This is often used for associating labels with form controls.

value attribute:

Specifies the initial value of the input field. For checkboxes and radio buttons, it represents the default state.

Here are examples of different <input> types:

Text input

<input type="text" name="username" id="username" value="ohnDoe">

Output

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

Output

Input passward

<input type="password" name="password" id="password"

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

Output

Checkbox

<input type="checkbox" name="subscribe" id="subscribe"  checked>Checkbox

Output

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

Output

Checkbox

Radio Button

<input type="radio" name="gender" id="Male"  checked>male
<input type="radio" name="gender" id="Female"  checked>female

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

Output

Male Female

Submit Button


<input type="submit"  value="submit">

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

Output

Reset Button

<input type="reset"  value="reset">

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

Output

Button


<input type="button"  value="click me">

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

Output

The <input> element is an essential part of HTML forms, providing a wide range of options for user input. It is often used in conjunction with other form elements and can be styled and enhanced using CSS and JavaScript.