HTML Form Attributes and Elements Explained
Form Attributes
action
Description: Specifies the URL where the form data will be sent when the form is submitted.
<form action="/submit-form" method="post">
Explanation: When the user submits the form, the data will be sent to /submit-form on the server.
method
Description: Defines the HTTP method (GET or POST) to be used when submitting the form.
Values:
GET: Appends form data to the URL as query parameters.POST: Sends form data in the body of the HTTP request.
<form method="post">
Explanation: Using POST will send the form data securely in the request body, whereas GET will append it to the URL.
enctype
Description: Specifies how the form data should be encoded when submitting it to the server.
Values:
application/x-www-form-urlencoded(default): Data is encoded as key-value pairs.multipart/form-data: Used for forms that include file uploads.text/plain: Data is sent as plain text.
<form enctype="multipart/form-data">
Explanation: For file uploads, you use multipart/form-data to handle file data correctly.
target
Description: Specifies where to display the response received after form submission.
Values:
_self: Loads the response in the same frame or tab._blank: Opens the response in a new tab or window._parent: Loads the response in the parent frame._top: Loads the response in the full window.
<form target="_blank">
Explanation: The form will open the response in a new tab.
name
Description: Provides a name for the form, which can be used to reference it via JavaScript or when submitting data.
<form name="contactForm">
Explanation: The form can be accessed or manipulated via JavaScript using the name contactForm.
autocomplete
Description: Controls whether the browser should automatically complete form fields based on user input history.
Values:
on: Enables autocomplete.off: Disables autocomplete.
<form autocomplete="off">
Explanation: Autocomplete is disabled for this form, meaning browsers will not suggest previously entered values.
novalidate
Description: Disables the browser’s default form validation.
<form novalidate>
Explanation: This form will bypass the built-in HTML5 form validation.
Form Elements
<input>
Description: The most versatile form element, used for various types of user input (e.g., text, email, password).
Attributes:
type: Specifies the type of input (e.g., text, email, password).name: Defines the name of the input, used when submitting form data.value: Sets the default value of the input.required: Makes the input mandatory.
<input type="text" name="username" required>
<textarea>
Description: Allows multi-line text input.
Attributes:
name: Defines the name of the textarea.rowsandcols: Set the dimensions of the textarea.placeholder: Provides a hint about what to enter.
<textarea name="message" rows="4" cols="50" placeholder="Enter your message"></textarea>
<select>
Description: Creates a dropdown menu for selecting one or more options.
Attributes:
name: Defines the name of the select element.multiple: Allows multiple selections.
<select name="country">
<option value="usa">United States</option>
<option value="canada">Canada</option>
</select>
<button>
Description: Defines a clickable button.
Attributes:
type: Specifies the button type (e.g., submit, reset, button).nameandvalue: Can be used to set values for form submission.
<button type="submit">Submit</button>
<fieldset>
Description: Groups related form controls and labels.
Attributes:
legend: Provides a caption for the fieldset.
<fieldset>
<legend>Personal Information</legend>
<input type="text" name="name">
</fieldset>
<legend>
Description: Provides a title or description for a <fieldset>.
<fieldset>
<legend>Gender</legend>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
</fieldset>