Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
28 views

HTML Forms

The document discusses various HTML form elements including: - Online forms gather user information through web pages and submit it to servers - Forms should be visually appealing and only include necessary information - Common input fields include text, radio buttons, checkboxes, and text areas - Select fields provide drop-down menus for users to choose from lists - Submit and reset buttons allow submitting or resetting the form - Forms require action and method attributes to specify where the submitted data is processed

Uploaded by

Ian Lamayo
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
28 views

HTML Forms

The document discusses various HTML form elements including: - Online forms gather user information through web pages and submit it to servers - Forms should be visually appealing and only include necessary information - Common input fields include text, radio buttons, checkboxes, and text areas - Select fields provide drop-down menus for users to choose from lists - Submit and reset buttons allow submitting or resetting the form - Forms require action and method attributes to specify where the submitted data is processed

Uploaded by

Ian Lamayo
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 22

HTML FORMS

Nov 23 – Summative assessment2

 Nov 23 – Summative assessment2


 LAB – web page
 LEC – essay type, multiple choice, true false
Online Forms

 Online forms are web pages purposely designed to gather information on the internet.
 These HTML documents are sent back to the server once the user submits them.
 The main use of online forms is to gather feedback or opinion from the users for data
processing, usually through a database.
Content

 Think about the information you will use, and the way you will present this information,
when you develop a form.
 The form should be both visually appealing and functional, which means that you may
need to take care when choosing which key points to include in a form.
INPUT FIELD , type=“text”
INPUT FIELD, type=“text”
INPUT FIELD, type=“text”

 To control the visible size of the text field, we use the size attribute.
 If the size attribute isn’t given, the default value as set by the browser is “20”-
which stands for 20cm.
 Another important attribute is maxlength. This sets the maximum number of
characters that can be typed into the field.
 This attribute is helpful where there are database length constrictions, or when
the exact or maximum number of characters the user must provide are known.
 In the next example, maxlength =“11” means that we are asking the user to
specify a mobile number that must be up to 11 digits long.
INPUT FIELD, type=“text”
INPUT FIELD, type=“text”
Radio Buttons

 Radio buttons are used when you want the user to select only one option from a list.
 The term comes from the shape of the buttons in a car radio, where you can choose only one
button in order to listen to a particular station.
 This type of attribute needs to be set to the value “radio”. Also, do not forget the name attribute
because if you do, the user can only use one of the many sets of radio buttons you may have in
your page.
 The value attribute, which can be used to set a default value for the input text, is also important.
 A radio button without a value becomes meaningless when submitted to the server because the
server will not know what the button stands for.
 To group a set of related radio buttons together, their name attribute should be one and the
same.
Radio Buttons
Radio Buttons

<input type="radio" name="movietype" value="none" checked/>None of


 On the browser, radio buttons look like small circles.
 Here, the checked attribute can be used to set the default selection if we want to indicate a pre-
chosen selection.
 Thus, if the above HTML code is set to display “None of these” as the default selection, the
modified code and browser display will look like:
Radio Buttons
Checkboxes

 Checkboxes are similar to radio buttons, but are used when you want to let the user select
more than one option among a number of choices.
 The type attribute would be set to the value “checkbox”.
Checkboxes

 In the browser, check boxes appear as little squares.


 Adding the checked attribute to one of these buttons will mark that button with a check
when the page loads.

 For example, if we choose the option “Don’t watch” to be checked, the HTML code for
that button would appear as follows.
Text Areas

 Text areas are text fields that have more than one line for longer text input.
 These are usually used to record comments or feedback. The tag for this is textarea as in
the example:

 You can specify the dimensions of the textbox with the rows and cols attribute, which
stand for the number of rows and columns, respectively.

 There is also an option to include default text to appear in the field when the page loads.
Text Areas
Select Fields

 A select field provides drop-down menus that the user can use to choose information from
a given list.
 Select fields are usually designed to look like compact list of items, and they also take up
very little space on the screen.
 You can create a select field with the < select > tag.
 The select tag must have a name attribute to identify the checkbox, and this comes in
handy when you have multiple checkboxes.
Select Fields
Submit Query and Reset buttons

 The Submit Query button is essential, as it allows users to submit the information they
typed in.
 The Reset button, on the other hand, restores the form to the default state the viewers saw
when they first loaded the page.
 The input tag is used here with the type attribute set to submit or reset for each button.
Submit Query and Reset buttons
Processing Forms

 To process the form, tags must have action and method attributes, which tell the webmaster
what the user entered in the form.
 The action attribute specifies the name of the field and should be unique within the form,
while the method attribute provides content associated with the action attribute.
 With these requirements taken into account, the form opening tag would look like this.
<form action="URL for a program in the server" method="get">
or
<form action="URL for a program in the server" method="post">

You might also like