Scribd
Upload
14 views11 pages

413-03

The document provides an overview of HTML forms, detailing the <form> element and various input types such as <input>, <label>, <select>, and others used for user input collection. It explains the functionality and attributes of these elements, including how they enhance accessibility and user interaction. Additionally, it describes specific input types like text, checkbox, and radio buttons, along with their attributes and usage in web forms.

Uploaded by

olamilekanadeboye2013
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
14 views11 pages

413-03

The document provides an overview of HTML forms, detailing the <form> element and various input types such as <input>, <label>, <select>, and others used for user input collection. It explains the functionality and attributes of these elements, including how they enhance accessibility and user interaction. Additionally, it describes specific input types like text, checkbox, and radio buttons, along with their attributes and usage in web forms.

Uploaded by

olamilekanadeboye2013
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 11

CSC403: Net-centric

Computing
HTML FORMS <FORM>
HTML form is used to collect user input. The user input is most
often sent to a server for processing.
The HTML <form> element is used to create an HTML form for
user input:
<form> form elements </form>
The <form> element is a container for different types of input
elements, such as: text fields, checkboxes, radio buttons, submit
buttons, etc.
The HTML <form> Elements
The HTML <form> element can contain one or more of the following
form elements:
<input>
<label>
<select>
<textarea>
<button>
<fieldset>
<legend>
<datalist>
<output>
<option>
The <label> Element
 The <label> element defines a label for several form elements.

 The <label> element is useful for screen-reader users, because the screen-
reader will read out loud the label when the user focus on the input
element.

 The <label> element also help 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.
The <input> Element
One of the most used form element is the <input> element.
The <input> element can be displayed in several ways, depending on the
type attribute.
<input type="button"> <input type="checkbox">
<input type="color"> <input type="date">
<input type="email"> <input type="file">
<input type="hidden"> <input type="image">
<input type="number"> <input type="password">
<input type="radio"> <input type="range">
<input type="reset"> <input type="search">
<input type="submit"> <input type="tel">
<input type="text"> <input type="time">
<input type="url"> <input type="week">
<input type="datetime-local"> Tip: The default value of the type
Input Type: text, password, submit, radio
<input type="text"> defines a single-line text input field

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

<input type="submit"> defines a button for submitting form data


to a form-handler.

The form-handler is typically a server page with a script for


processing input data.
<input type="radio"> defines a radio button.

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


Input Type: checkbox, color, date
<input type="checkbox"> defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a


limited number of choices.
The <input type="color"> is used for input fields that should
contain a color.

Depending on browser support, a color picker can show up


in the input field.
The <input type="date"> is used for input fields that should
Attribute Description
checked Specifies that an input field should be pre-selected when the page loads (for
type="checkbox" or type="radio")
disabled Specifies that an input field should be disabled
max Specifies the maximum value for an input field
maxlength Specifies the maximum number of character for an input field
min Specifies the minimum value for an input field
pattern Specifies a regular expression to check the input value against
readonly Specifies that an input field is read only (cannot be changed)
required Specifies that an input field is required (must be filled out)
size Specifies the width (in characters) of an input field
step Specifies the legal number intervals for an input field
value Specifies the default value for an input field
name, value
 The name attribute specifies the name of a form.
The name attribute is used to reference elements in a JavaScript, or to
reference form data after a form is submitted.

 The value attribute specifies the value of an <input> element. The value
attribute is used differently for different input types:
 For "button", "reset", and "submit" - it defines the text on the button
 For "text", "password", and "hidden" - it defines the initial (default) value of
the input field
 For "checkbox", "radio", "image" - it defines the value associated with the
input (this is also the value that is sent on submit)
Note: The value attribute cannot be used with <input type="file">.
Let’s create a form,
showing the
different input
types, using <form>
<label> & <input>
The <select> Element
The <select> element defines a drop-down list
 The <option> elements 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

You might also like