Forms are used to collect and send user input data to a server for processing. They are a fundamental part of web development, enabling user interaction, such as logging in, searching, or submitting data.
HTML forms are created using the <form> tag, which contains various types of input fields for users to interact with.
Basic Syntax:
<form action="submit.php" method="POST">
<!-- Form elements go here -->
</form>
action: Specifies the URL where the form data is sent when submitted.method: Defines how the form data is sent to the server. It can be:
GET: Data is appended to the URL as query parameters (visible in the URL).POST: Data is sent as a request body (invisible in the URL).The <input> element is the most common form element used to capture user input. Various type attributes are used to specify different types of input fields.
<input type="text">)The text input field allows users to enter text, such as a name or email.
Example:
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username">
</form>
type="text": Defines a single-line text input.name: Assigns a name to the input field, which is used as the key when sending the form data.id: Links the label to the input field.<input type="password">)The password input field hides the characters typed by the user for security purposes.
Example:
<form>
<label for="password">Password:</label>
<input type="password" id="password" name="password">
</form>
type="password": Masks the input to protect sensitive information.<input type="email">)The email input field validates that the entered text is a properly formatted email address.
Example:
<form>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
</form>
type="email": Ensures the input follows a valid email format (e.g., name@domain.com).<input type="url">)The URL input field validates that the entered text is a properly formatted URL.
Example:
<form>
<label for="website">Website:</label>
<input type="url" id="website" name="website">
</form>
type="url": Ensures the input follows a valid URL format (e.g., https://www.example.com).<input type="tel">)The telephone input field is used for entering phone numbers. It doesn’t enforce any specific format but can be paired with pattern validation.
Example:
<form>
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone">
</form>
type="tel": Designed for phone number inputs.<input type="number">)The number input field allows users to enter only numerical values. You can set minimum and maximum values.
Example:
<form>
<label for="age">Age:</label>
<input type="number" id="age" name="age" min="1" max="100">
</form>
type="number": Restricts input to numbers.min and max: Define the range of valid input values.<input type="date">)The date input field allows users to select a date from a date-picker.
Example:
<form>
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob">
</form>
type="date": Enables a date picker for selecting dates.<input type="time">)The time input field allows users to select a specific time.
Example:
<form>
<label for="appointment">Appointment Time:</label>
<input type="time" id="appointment" name="appointment">
</form>
type="time": Provides a time picker for selecting times.<input type="range">)The range input field allows users to select a value from a predefined range by sliding a control.
Example:
<form>
<label for="volume">Volume:</label>
<input type="range" id="volume" name="volume" min="0" max="100">
</form>
type="range": Creates a slider control.min and max: Define the range of the slider.<input type="color">)The color input field allows users to select a color from a color picker.
Example:
<form>
<label for="favcolor">Favorite Color:</label>
<input type="color" id="favcolor" name="favcolor">
</form>
type="color": Provides a color picker.<input type="file">)The file input field allows users to upload files from their device.
Example:
<form>
<label for="resume">Upload Resume:</label>
<input type="file" id="resume" name="resume">
</form>
type="file": Opens a file dialog for selecting files.<input type="checkbox">)The checkbox input allows users to select one or more options from a list.
Example:
<form>
<label><input type="checkbox" name="subscribe" value="yes"> Subscribe to newsletter</label>
</form>
type="checkbox": Creates a checkbox.value: Defines the value sent to the server if the checkbox is checked.<input type="radio">)Radio buttons allow users to select only one option from a group of predefined choices.
Example:
<form>
<label><input type="radio" name="gender" value="male"> Male</label>
<label><input type="radio" name="gender" value="female"> Female</label>
</form>
type="radio": Creates a radio button.name: Must be the same for all radio buttons in the group so only one option can be selected.value: Defines the value sent to the server when the radio button is selected.<input type="hidden">)The hidden input field is not visible to the user but still sends data to the server.
Example:
<form>
<input type="hidden" name="session_id" value="abc123">
</form>
type="hidden": Sends hidden data.<input type="submit">)The submit button sends the form data to the server when clicked.
Example:
<form>
<input type="submit" value="Submit">
</form>
type="submit": Sends the form data to the server.<input type="reset">)The reset button clears all form fields and resets them to their default values.
Example:
<form>
<input type="reset" value="Reset">
</form>
type="reset": Resets the form fields to their default values.<textarea>The <textarea> element is used for multi-line text input.
Example:
<form>
<label for="comments">Comments:</label>
<textarea id="comments" name="comments" rows="4" cols="50"></textarea>
</form>
rows: Specifies the number of visible rows.cols: Specifies the width of the text area (in characters).<select> (Drop-down List)The <select> element creates a drop-down list for selecting an option.
Example:
<form>
<label for="country">Country:</label>
<select id="country" name="country">
<option value="usa">USA</option>
<option value="canada">Canada</option>
<option value="uk">UK</option>
</select>
</form>
<option>: Defines an option in the drop-down list.selected: Marks an option as the default selection.<button>The <button> element is more flexible than <input type="submit">
because it allows both text and HTML content within the button.
Example:
<form>
<button type="submit">Submit</button>
</form>
type="submit": Acts like the submit button when clicked.HTML5 introduced built-in validation for form elements to ensure that users provide the correct input.
required: Makes a field mandatory.pattern: Defines a regular expression that the input must match.min, max, maxlength, minlength: Set length or value restrictions on inputs.Example:
<form>
<label for="username">Username (Required):</label>
<input type="text" id="username" name="username" required minlength="5">
<label for="password">Password (Min 8 characters):</label>
<input type="password" id="password" name="password" required minlength="8">
<input type="submit" value="Submit">
</form>
In this example, the username field is required and must be at least 5 characters long, and the password must be at least 8 characters long.
method="GET": Appends form data to the URL (visible).method="POST": Sends form data as part of the request body (invisible).action: Specifies the URL where the form data should be sent.These are the core concepts and elements for creating and managing forms in HTML. With these basics, you can collect and process different types of user input data efficiently.
Next -> Semantics HTML5
Back to Contents page click here