<p> E M P O W E R M E N T T E C H N O L O G Y </p>

C R E AT I N G A F O R M U S I N G

<p> Your Name Here </p>

File Edit Selection View Go Run Terminal Help

Forms

HTML FORMS

An HTML form is used to collect user input. The user

input is most often sent to a server for processing.
File Edit Selection View Go Run Terminal Help

Forms

FORM ELEMENT

The HTML <form> element is used to create an HTML form

for user input:

The <form> element is a container for different types of

input elements, such as: text fields, checkboxes, radio
buttons, submit buttons, etc.
File Edit Selection View Go Run Terminal Help

Forms Input

INPUT ELEMENT

The HTML <input> element is the most used form element.

An <input> element can be displayed in many ways,

depending on the type attribute.
File Edit Selection View Go Run Terminal Help

Forms Input

INPUT ELEMENT

Type Description

<input type="text"> Displays a single-line text input field

<input type="radio"> Displays a radio button (for selecting one of many choices)

<input type="checkbox"> Displays a checkbox (for selecting zero or more of many choices)

<input type="submit"> Display a submit button (for submitting the form)

<input type="button"> Displays a clickable button

File Edit Selection View Go Run Terminal Help

Forms Input T_Field

TEXT FIELDS

The <input type="text"> defines a single-line input field

for text input.

Example code:
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name=""><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="">
</form>
File Edit Selection View Go Run Terminal Help

Forms Input T_Field Label

LABEL ELEMENT

The <label> tag defines a label for many form elements.

The <label> element is useful for screen-reader users,

because the screen-reader will read out loud the label
when the user focuses on the input element.
File Edit Selection View Go Run Terminal Help

Forms Input T_Field Label

LABEL ELEMENT

The <label> element also helps users who have difficulty

clicking on very small regions (such as radio buttons or
checkboxes) - because when the user clicks the text within
the <label> element, it toggles the radio button/checkbox.

The for attribute of the <label> tag should be equal to the

id attribute of the <input> element to bind them together.
File Edit Selection View Go Run Terminal Help

Forms Input T_Field Label Radio

RADIO BUT TONS

The <input type="radio"> defines a radio button.

Radio buttons let a user select ONE of a limited number of

choices.
File Edit Selection View Go Run Terminal Help

Forms Input T_Field Label Radio

RADIO BUT TONS

Example code:
<form>
<input type="radio" id="boy" name="select">
<label for="boy">Boy</label><br>
<input type="radio" id="girl" name="select">
<label for="girl">Girl</label><br>
</form>
File Edit Selection View Go Run Terminal Help

Forms Input T_Field Label Radio Checkbox

CHECKBOXES

The <input type="checkbox"> defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a

limited number of choices.
File Edit Selection View Go Run Terminal Help

Forms Input T_Field Label Radio Checkbox

CHECKBOXES

Example code:
<form>
<input type="checkbox" id="vehicle1" name="vehicle1">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3">
<label for="vehicle3"> I have a boat</label>
</form>
File Edit Selection View Go Run Terminal Help

Forms Input T_Field Label Radio Checkbox Submit

SUBMIT BUT TON

The <input type="submit"> defines a button for submitting

the form data to a form-handler.

The form-handler is typically a file on the server with a

script for processing input data.

The form-handler is specified in the form's action

attribute.
File Edit Selection View Go Run Terminal Help

Forms Input T_Field Label Radio Checkbox Submit

SUBMIT BUT TON

Example code:
<form action="">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name=""><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name=""><br><br>
<input type="submit" value="Submit">
</form>
File Edit Selection View Go Run Terminal Help

Forms Input T_Field Label Radio Checkbox Submit Name

N A M E AT T R I B U T E F O R I N P U T

Notice that each input field must have a name attribute to

be submitted.

If the name attribute is omitted, the value of the input

field will not be sent at all.
File Edit Selection View Go Run Terminal Help

Forms Input T_Field Label Radio Checkbox Submit Name Select

SELECT ELEMENT

The <select> element defines a drop-down list:

Example code:

<label>Choose a car:</label>
<select>
<option>Volvo</option>
<option>Saab</option>
<option>Fiat</option>
<option>Audi</option>
</select>
File Edit Selection View Go Run Terminal Help

Forms Input T_Field Label Radio Checkbox Submit Name Select Option

OPTION ELEMENT

The <option> element defines an option that can be selected.

By default, the first item in the drop-down list is

selected.

To define a pre-selected option, add the selected attribute

to the option:
Example code:

<option value="fiat" selected>Fiat</option>

File Edit Selection View Go Run Terminal Help

Forms Input T_Field Label Radio Checkbox Submit Name Select Option Size

S I Z E AT T R I B U T E

Use the size attribute to specify the number of visible

values:
Example code:
<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
File Edit Selection View Go Run Terminal Help

Forms Input T_Field Label Radio Checkbox Submit Name Select Option Size T_Area

T E X TA R E A E L E M E N T

The <textarea> element defines a multi-line input field (a

text area):
Example code:
<textarea name="" rows="10" cols="30"></textarea>
File Edit Selection View Go Run Terminal Help

Forms Input T_Field Label Radio Checkbox Submit Name Select Option Size T_Area Button

BUT TON ELEMENT

The <button> element defines a clickable button:

Example code:
<button type="button" onclick="alert('Hello World!')">Click
Me!</button>
File Edit Selection View Go Run Terminal Help

Forms Input T_Field Label Radio Checkbox Submit Name Select Option Size T_Area Button F_L

FIELDSET AND LEGEND ELEMENT

The <fieldset> element is used to group related data in a

form.

The <legend> element defines a caption for the <fieldset>

element.
File Edit Selection View Go Run Terminal Help

Forms Input T_Field Label Radio Checkbox Submit Name Select Option Size T_Area Button F_L

FIELDSET AND LEGEND ELEMENT

Example code:

<form action="">
<fieldset>
<legend>Name:</legend>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname"><br>
<br>
<input type="submit" value="Submit">
</fieldset>
</form>
File Edit Selection View Go Run Terminal Help

Forms Input T_Field Label Radio Checkbox Submit Name Select Option Size T_Area Button F_L D_List

D ATA L I S T E L E M E N T

The <datalist> element specifies a list of pre-defined

options for an <input> element.

Users will see a drop-down list of the pre-defined options

as they input data.

The list attribute of the <input> element, must refer to the

id attribute of the <datalist> element.
File Edit Selection View Go Run Terminal Help

Forms Input T_Field Label Radio Checkbox Submit Name Select Option Size T_Area Button F_L D_List

D ATA L I S T E L E M E N T

Example code:

<form action="">
<input list="Philippines">
<datalist id="Philippines">
<option value="Manila">
<option value="Cebu">
<option value="Davao">
<option value="Palawan">
<option value="Batanes">
</datalist>
</form>
File Edit Selection View Go Run Terminal Help

Input T_Field Label Radio Checkbox Submit Name Select Option Size T_Area Button F_L D_List Password

I N P U T T Y P E PA S S W O R D

<input type="password"> defines a password field:

Example code:

<form>
<label for="username">Username:</label><br>
<input type="text" id="username" name=""><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="">
</form>
File Edit Selection View Go Run Terminal Help

T_Field Label Radio Checkbox Submit Name Select Option Size T_Area Button F_L D_List Password Reset

INPUT TYPE RESET

<input type="reset"> defines a reset button that will reset

all form values to their default values:
Example code:

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

File Edit Selection View Go Run Terminal Help

Label Radio Checkbox Submit Name Select Option Size T_Area Button F_L D_List Password Reset Date

I N P U T T Y P E D AT E

The <input type="date"> is used for input fields that should

contain a date.

Depending on browser support, a date picker can show up in

the input field.

Example code:
<form>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="">
</form>
File Edit Selection View Go Run Terminal Help

Radio Checkbox Submit Name Select Option Size T_Area Button F_L D_List Password Reset Date Email

INPUT TYPE EMAIL

The <input type="email"> is used for input fields that

should contain an e-mail address.

Depending on browser support, the e-mail address can be

automatically validated when submitted.

Some smartphones recognize the email type, and add ".com" to

the keyboard to match email input.
File Edit Selection View Go Run Terminal Help

Checkbox Submit Name Select Option Size T_Area Button F_L D_List Password Reset Date Email File

INPUT TYPE FILE

The <input type="file"> defines a file-select field and a

"Browse" button for file uploads.
Example code:

<form>
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="">
</form>
File Edit Selection View Go Run Terminal Help

Submit Name Select Option Size T_Area Button F_L D_List Password Reset Date Email File Number

INPUT TYPE NUMBER

The <input type="number"> defines a numeric input field.

You can also set restrictions on what numbers are accepted.

The following example displays a numeric input field, where

you can enter a value from 1 to 5:
File Edit Selection View Go Run Terminal Help

Submit Name Select Option Size T_Area Button F_L D_List Password Reset Date Email File Number

INPUT TYPE NUMBER

Example code:
<form>
<label>Quantity (between 1 and 5):</label>
<input type="number" min="1" max="5">
</form>
File Edit Selection View Go Run Terminal Help

Name Select Option Size T_Area Button F_L D_List Password Reset Date Email File Number Placeholder

P L A C E H O L D E R AT T R I B U T E

The input placeholder attribute specifies a short hint that

describes the expected value of an input field (a sample
value or a short description of the expected format).The
short hint is displayed in the input field before the user
enters a value.

The placeholder attribute works with the following input

types: text, search, url, tel, email, and password.
File Edit Selection View Go Run Terminal Help

Select Option Size T_Area Button F_L D_List Password Reset Date Email File Number Placeholder Required

R E Q U I R E D AT T R I B U T E

The input required attribute specifies that an input field

must be filled out before submitting the form.

The required attribute works with the following input types:

text, search, url, tel, email, password, date pickers,
number, checkbox, radio, and file.
File Edit Selection View Go Run Terminal Help

Select Option Size T_Area Button F_L D_List Password Reset Date Email File Number Placeholder Required

R E Q U I R E D AT T R I B U T E

Example code:

<form>
<label for="username">Username:</label>
<input type="text" id="username" name="" required>
</form>
<p>THANK YOU
FOR LISTENING </p>

C R E AT I N G A F O R M U S I N G