HTML FORMS AND INPUT

HTML | FORMS AND USER INPUT

ALSO IN THIS TOPIC
HTML HOME
GETTING STARTED
HTML TAGS AND ELEMENTS
PAGE STRUCTURE AND LAYOUT
YOU ARE HERE | FORMS AND USER INPUT
CSS WITH HTML
HTML QUICK REFERENCE

This section will take you from your first 'Hello World' page to a basic page with tables, images, menus and user input.

SECTION 1 | THE INPUT TAG

The <input> element is used to create different types of input controls, such as text fields, checkboxes, and radio buttons. The type attribute defines the input type, and the name attribute is used to identify the input field when submitting the form.

<input type="text" name="username" placeholder="Username">

In the example above the input type is 'text', however it could be other input types such as submit for a button.

SECTION 2 | THE FORM TAG

The <form> element is a container that holds the form controls used to collect user input. Any user input that you want to save or uses needs to be inside a <form> tag and the attributes/action within the tag need to direct the data where to go. The action attribute specifies the URL that will process the submitted data, and the method attribute defines the HTTP method used when submitting the form (e.g., GET or POST).

The POST and GET methods are two different ways to send data from an HTML form to a server. They differ in how they transmit the data and the use cases for which they are best suited.

POST method:
When a form uses the POST method, the data is sent in the request body, making it more secure since the data is not visible in the URL. The POST method is suitable for submitting sensitive information, such as passwords or personal details, and for sending large amounts of data. It can also be used to create or update resources on the server.

Pros:

Data is sent in the request body, making it more secure.
No size limitations for the submitted data.
Can be used to create or update resources on the server.

Cons:

Slower than GET, as it sends data in the request body.
Not easily bookmarked or cached by browsers.

GET method:
When a form uses the GET method, the data is sent as part of the URL, in the form of query parameters. This makes the data visible in the URL, making it less secure and suitable for non-sensitive data. The GET method is commonly used for search forms or filtering data, where the user's input does not change the server's resources. It is also easily bookmarked and cached by browsers, enabling users to share or save the URL with the submitted data.

Pros:

Faster than POST, as it sends data in the URL.
Easily bookmarked and cached by browsers.
Suitable for search forms or filtering data.

Cons:

Data is visible in the URL, making it less secure.
Limited by the maximum URL length, restricting the amount of data that can be sent.

While the POST method is more secure and suitable for sending sensitive information or large amounts of data, the GET method is better for search forms, filtering data, and situations where the data should be visible in the URL. It is essential to choose the appropriate method based on the use case and the type of data being submitted. We cover more on using the POST and GET methods in the WEB DEVELOPMENT section.

SECTION 3 | SELECT AND OPTION

The <option> tag is an HTML element used within a <select> element to define individual items in a scrolling list. Each <option> element represents one selectable option in the list. Users can choose one or more options from the drop-down list, depending on the configuration of the <select> element.

<select name="Subject">
<option value="CS">Computer Science</option>
<option value="PH">Physics</option>
<option value="BS">Business Studies</option>
</select>

The value attribute is used to specify the value that will be sent to the server when the form is submitted. If the value attribute is not specified, the text content of the <option> element will be used as the value.

You can use the selected attribute to pre-select an option, for example

<select name="Subject">
<option value="CS" selected>Computer Science</option>
<option value="PH">Physics</option>
<option value="BS">Business Studies</option>
</select>

You can also allow the user to select multiple values with the multiple attribute, for example

<select name="Subject" multiple>
<option value="CS">Computer Science</option>
<option value="PH">Physics</option>
<option value="BS">Business Studies</option>
</select>

SECTION 4 | DROPDOWN MENUS

Creating a dropdown menu with a list of options requires the use of css, the css deals with the dynamic elements of the menu including the styling. The html below shows how to create a drop down menu for subject choices of Maths, Computer Science and Physics. In this example the css has been placed the <head> however as you progress it would be good to place the css in a separate css document.

The code highlighted in bold is the HTML part of creating the dropdown menu.

<html>
<head>
<title>Subjects Dropdown</title>
<style>
/* Style for the dropdown container */
.dropdown {
position: relative;
display: inline-block;
}

/* Style for the dropdown button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
border-radius: 4px;
text-decoration: none;
}

/* Style for the hover and focus state of the dropdown button */
.dropbtn:hover,
.dropbtn:focus {
background-color: #3e8e41;
}

/* Style for the dropdown content container */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

/* Style for the links inside the dropdown content */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

/* Style for the hover state of the links inside the dropdown content */
.dropdown-content a:hover {
background-color: #f1f1f1;
}

/* Show the dropdown content when the user hovers over the dropdown container */
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>

<div class="dropdown">

<a href="#" class="dropbtn">Subjects</a>

<div class="dropdown-content">

<a href="maths.html">Maths</a>
<a href="computerscience.html">Computer Science</a>
<a href="physics.html">Physics</a>
</div>
</div>
</body>
</html>

SECTION 5 | SUBMIT BUTTONS

You can add an input button with the following code:
<input type="submit" name="buttonName" value="SUBMIT">
The type = submit determines that it will be a button, the name is the name of your button, you might refer to this elsewhere in your program, the word 'buttonName' is just a variable so you can call this anything meaningful, and lastly the value is what you want to display ion the button for the user.

To give the button an action put your button inside a form using the <form> tags. In the example below the button is inside the <form> tags and the action when the button is pressed is to load another HTML page.

<form action = "myNextPage.HTML">
<input type="submit" name="buttonName" value="SUBMIT">
</form>

If you want to accompany the button with a user input field you can simply add a text box to the form as illustrated below.

<form align = "center">
<input type="text" name="username" placeholder = "USERNAME">
<input type="submit" name="getName" value="SUBMIT">
</form>

The placeholder in the text box is the text that will show in the text box until the users starts to type, in other words a user prompt.

SECTION 6 | TEXT INPUT BOXES

To use a text input box with a submit button in an HTML form, you can use the <input> element with the type attribute set to "text" for the text input box, and another <input> element with the type attribute set to "submit" for the submit button. Here's an example of how to create a simple form with a text input box and a submit button

<form action="/submit" method="POST">
<label for="username">Username:</label>
<input type="text" name="username" id="username" placeholder="Enter your username">

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

to explain the code above, the <form> element wraps the text input box and the submit button. The action attribute specifies the URL to which the form data will be sent when the form is submitted, and the method attribute specifies the HTTP method used to send the form data (e.g., "POST" or "GET").

The <label> element is used to associate a text label with the text input box. The for attribute in the <label> element should match the id attribute in the <input> element for the association to work correctly.

The text input box is created using the <input> element with the type attribute set to "text". The name attribute is used to identify the form data when it's submitted, and the placeholder attribute displays a hint to the user about the expected input.

The submit button is created using the <input> element with the type attribute set to "submit". The value attribute specifies the text displayed on the button.

When the user fills in the text input box and clicks the submit button, the form data will be sent to the specified URL using the specified HTTP method. The form data consists of key-value pairs, where the keys are the name attributes of the input elements and the values are the user inputs.

SECTION 7 | RADIO BUTTONS

Radio buttons are a type of input element in HTML that allows users to select one option from a group of predefined options. They are commonly used in forms for questions where only one response is allowed. In this section, we'll explore how to create and use radio buttons in HTML forms.

<form>
<input type="radio" id="option1" name="choices" value="option1">
<label for="option1">Option 1</label><br>
<input type="radio" id="option2" name="choices" value="option2">
<label for="option2">Option 2</label><br>
<input type="radio" id="option3" name="choices" value="option3">
<label for="option3">Option 3</label><br>
</form>

In this code:

<br> simply adds a line break between radio buttons
name attribute (input element): The name attribute is used to group related input elements together. When dealing with radio buttons, it's essential to give all radio buttons within the same group the same name attribute value. This ensures that only one radio button can be selected at a time within that group.
value attribute (input element): The value attribute defines the value that will be sent to the server when the form is submitted. Each radio button should have a unique value attribute within its group. When a user selects a radio button and submits the form, the value of the selected radio button will be sent to the server.
for and id attribute (label element): The for attribute in the <label> element is used to associate the label with a specific input element. The value of the for attribute should match the id attribute of the related input element. This association makes the label clickable and focuses the associated input element when clicked, improving usability and accessibility.

You can also have a pre-selected option by adding the checked attribute to the input you would like pre-selected. The user can still change this selection. The example below shows the pre-selection of option 1.

<form>
<input type="radio" id="option1" name="choices" value="option1" checked>
<label for="option1">Option 1</label><br>
<input type="radio" id="option2" name="choices" value="option2">
<label for="option2">Option 2</label><br>
<input type="radio" id="option3" name="choices" value="option3">
<label for="option3">Option 3</label><br>
</form>

NAVIGATION

GETTING STARTED | Your first webpage
HTML TAGS AND ELEMENTS | An introduction to common tags and elements
PAGE STRUCTURE AND LAYOUT | The concepts of structuring your page
FORMS AND USER INPUT | Various methods of user input such as text box and drop downs
CSS WITH HTML | The relationship between HTML and CSS
HTML QUICK REFERENCE