HTML Form Design
What is an HTML Form?
An HTML form would be a data input, and this data from a user is then sent to and stored on a web server. What a lot of information HTML form might contain: email addresses, passwords, phone numbers & usernames, to name just a few.
An HTML form could, for instance, consist of radio buttons, a submit button, tick boxes, input fields, and similar elements. The required supplies are the cases that transmit a user's data to a web server.
HTML's <form> tag represents the forms, and they have elements that allow users to type in information, e.g., input, textarea, and various others.
Syntax
<form action = "Script URL" method = "GET|POST">
form elements like input, textarea, etc.
</form>
Bottom of FormExample of an HTML Form
<html>
<body>
<form>
Username:<br>
<input type="text" name="username">
<br>
Email id:<br>
<input type="text" name="email_id">
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Input Element in HTML Forms
The most frequently used tags of HTML forms are input elements. A large number of user input fields can be built, such as text fields, check boxes, password fields, radio buttons, submit buttons, etc. Below is a list of the most typical input elements:
Text Field in HTML Forms:
The text field is the single-line text input place where the user can enter text. The "input" element with the type property "text" produces Text Field input controls.
Example of Text Field
<html>
<body>
<h3>Example Of Text Field</h3>
<form>
<label for="EMAIL ID">
Email Id:
</label>
<br>
<input type="text" name="Email id"
id="Email id">
</form>
</body>
</html>
Number Field in HTML Forms:
Input of numbers is accepted in this field.
Example
<html>
<body>
<h3>Example Of Number Field</h3>
<form>
<label for="Age">Age:</label><br>
<input type="number" name="Age" id="Age">
</form>
</body>
</html>
Password Field in HTML Forms:
An interface component called a password field renders text representation character by character with asterisks or dots so that the user's typed sequence of characters remains hidden from others. The "input" tag is used here with its type property assigned to "password; it works for creating a password input field.
Example
<html>
<body>
<h3>Example of Password Field</h3>
<form>
<label for="user-password">
Password:
</label><br>
<input type="password" name="user-pwd"
id="user-password">
</form>
</body>
</html>
Radio Buttons in HTML Form:
Radio buttons empower users to pick the right option from the list. An "Input" label with a type property set to "radio" is used to make radio button input controls.
Example
<html>
<body>
<h3>Example of Radio Buttons</h3>
<form>
SELECT GENDER
<br>
<input type="radio" name="gender" id="male">
<label for="male">Male</label><br>
<input type="radio" name="gender" id="female">
<label for="female">Female</label>
</form>
</body>
</html>
Checkboxes in HTML Form:
The user would use checkboxes to select one or even multiple options that are already set on the list. Input fields with the "checkbox" type attribute are used to design checkbox controls.
Example
<html>
<body>
<h3>Example of HTML Checkboxes</h3>
<form>
<b>SELECT SUBJECTS</b>
<br>
<input type="checkbox" name="subject" id="maths">
<label for="maths">Maths</label>
<input type="checkbox" name="subject" id="science">
<label for="science">Science</label>
<input type="checkbox" name="subject" id="english">
<label for="english">English</label>
</form>
</body>
</html>
File select boxes in HTML Forms:
The user can choose a local file and send it as an attachment to the web server with the help of file pick boxes. It looks like a text box with a button pressing, which one browses through the files. In this way, too, you can save time by typing the name of the file and its path directly without struggling to reach it. The file input element is used to create a file browser, and the attribute type of it is set to 'file'.
Example
<html>
<body>
<h3>Example of a File Select Box</h3>
<form>
<label for="fileselect">Upload:</label>
<input type="file" name="upload"
id="fileselect">
</form>
</body>
</html>
Text area in an HTML Form:
The Text Area input control allows the user to input text or a description on several lines. This control uses the "textarea" tag.
Example
<html>
<body>
<h3>Example of a Text Area Box</h3>
<form>
<label for="Description">Description:</label>
<textarea rows="5" cols="50" name="Description"
id="Description">
</textarea>
</form>
</body>
</html>
Select Boxes in HTML Forms:
The checkboxes enable a user to tick only one or multiple marked outcomes from the list of available options under the drop-down selection. Two elements are utilized to make pick boxes: "choose" and "option."
Example
<html>
<body>
<h3>Example of a Select Box</h3>
<form>
<label for="country">Country:</label>
<select name="country" id="country">
<option value="India">India</option>
<option value="Sri Lanka">Sri Lanka</option>
<option value="Australia">Australia</option>
</select>
</form>
</body>
</html>
Reset And Submit Buttons:
The user will be able to send the form data to the web server by simply clicking the Submit button. The option for you to either press the designated "reset button" or use the present default values can be done to remove or replace the current form data.
Example
<html>
<body>
<h3>Example of a Submit And Reset Button</h3>
<form action="test.php" method="post" id="users">
<label for="username">Username:</label>
<input type="text" name="username" id="Username">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</body>
</html>
HTML5 introduced other options for the <input> element:
- Image
A coordinate that is related to the size of a specific image and has the additional semantic requirement that it be the last value chosen before the form is submitted.
- Datetime
Indicates a time and date (year, month, day, hour, minute, second, and time fraction) by UTC time zones with the ISO 8601 standard.
- Datetime-local
An ISO 8601-coded date and a second in 24-hour time (Year, month, date, hour, minutes, seconds) without any timezone information.
- Date
A date (month, day, year) encoded in ISO 8501 format.
- Month
A date encoded using ISO 8501 that consists of a year and a month.
- Week
A date encoded using ISO 8601 that consists of a week number and a year.
- Time
A time formatted in accordance with ISO 8601 (hour, minute, seconds, fractional seconds).
- Number
It just takes numbers as input. With a default value of 1, the step attribute indicates the precision.
- Range
When a value from a range of numbers is required for an input field, the range type is used.
Only email values are accepted. When it comes to input fields where an email address is required, this type is used. You are forced to input your email address in the format [email protected] if you attempt to submit a basic text.
- URL
Only URL values are accepted. This type is used for input fields where a URL address is required. Simple text submissions are forced to contain only the URL address, which must be entered in either http://www.example.com or http://example.com format.
Attributes Used in HTML Forms
The Action Attribute:
By using action commend, a form user can submit the form to the chosen server. With a click on the submit button on the form, the data within it usually goes through the website to the web server page.
Example
<html>
<body>
<h3>Example of a Submit And Reset Button</h3>
<form action="test.php" method="post" id="users">
<label for="username">Username:</label>
<input type="text" name="username" id="Username">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</body>
</html>
The Target Attribute in HTML Forms:
The submitted result can open in the current window, a new tab, or a new frame; this can be specified using the Target attribute. When "self" is entered as the default value, the form is submitted in the same window. An attribute must be present to designate whether the window the form will open will be the same frame if it is a new window.
Example
<html>
<body>
<form action="/test.php" target="_blank">
Username:<br>
<input type="text" name="username">
<br>
Password:<br>
<input type="password" name="password">
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Name Attribute in Html Forms:
Every input field needs the name attribute. The name tag prevents form elements from being filled unnecessarily into the site body tag.
Example
<html>
<body>
<form action="/test.php" target="_blank">
Username:<br>
<input type="text">
<br>
Password:<br>
<input type="password" name="password">
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
The Method Attribute:
When submitting the form, it is used to indicate the HTTP method that will be used to transfer data. The two categories of HTTP methods are POST and GET.
The GET Method:
<html>
<body>
<form action="/test.php" target="_blank"
method="GET">
Username:<br>
<input type="text" name="username">
<br>
Password:<br>
<input type="password" name="password">
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Consequently, quantities of data (and more) hanging on the unopened tab in the private browser window will also be visualized in the address bar of the newly opened tab and the form.
The Post Method:
<html>
<body>
<form action="/test.php" target="_blank"
method="post">
Username:<br>
<input type="text" name="username">
<br>
Password:<br>
<input type="password" name="password">
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
This could be illustrated with the example of submission that is applied with the POST method. Only the fields of the form will be asked in a new tab address bar, not to mention the values, in the case when we use the GET method.