HTML5- Form and Multimedia Flashcards
What is the full form of HTML?
Hyper Text Markup Language
Give two examples of web browsers
- Google Chrome
- Safari
What is HTML?
HTML is a language in which you can make web pages on the Internet and view them using a web browser
What are HTML documents made of?
HTML documents are made up of text content and special codes known as tags.
What is the function of text content and tags?
They tell web browsers how to display the content
What is input control?
– An INPUT CONTROL is a type of input mechanism on a form.
– A form may contain several different types of input controls classified as DATA or TEXT input controls.
What is data input control?
A data input control can be a:
- Radio button (RADIO)
- Check box (CHECKBOX)
- Submit button (SUBMIT)
- Reset button (RESET)
- Selection menu (SELECT)
What is text input control
A TEXT input control allows the user to enter text through the following:
> Text box (TEXT) -
for small amount of text
> Textarea box (TEXTAREA) -
for large amount of text
> Password box (PASSWORD) -
for entering a password
What is text control?
A text control creates a text box that is used for a single line of input
What are the attributes of text control?
The text controls have two attributes:
1. MAXLENGTH: determines the number of characters that are displayed on the form.
2. SIZE: specifies maximum length of the input field
What is PASSWORD control?
- creates a text box used for single line of input, except that the characters entered into the field can appear as asterisks or bullets.
- a password text box holds the password entered by a visitor,
What is RADIO control?
- limits the web page visitor to only one choice from a list of choices.
- each option is preceded by a radio or option button, which typically appears as a circle
What is CHECKBOX control?
- allows a web page visitor to select more than one choice from a list of choices.
- each choice in a checkbox list can either be on or off
- by default, all checkboxes are deselected.
What is SELECT control?
- creates a selection menu from which the visitor selects one or more choices.
- this prevents the visitor from having to type information into a text or textarea field.
What is TEXTAREA control?
- creates a field that allows multiple lines of input.
- it is useful when detailed input is required from or desired by a web page visitor.
What is SUBMIT button?
- send the information to the appropriate location for processing.
- a web page form must include a Submit button.
What is RESET button?
- clears any input that was entered in the form. resetting the input controls back to the default.
- a web page form must also include a reset button
What is a FORM?
- we can use forms to collect information from people who visit our websites.
- a form has input fields for users to enter information and limits choices to valid options to avoid incorrect data entry.
- forms provide an easy way to collect required information.
What are the three important parts of a web page?
Web page forms have three important parts
i. a <FORM> tag
ii. form input elements
iii. a SUBMIT button
While making a form, why do we write HTML?
While designing and building a form, you write HTML to define the different objects that allow users to type or select information.
What does these objects include?
These objects can include text fields, radio buttons, checkboxes and other options.
What should all forms also include?
All forms should include a SUBMIT BUTTON for sending the data to a web server for processing
When should we set up a form?
We must set up a form before we can add information to it.
What should we do in order to set up a form?
To set up a form, we need to specify two important information, i.e. METHOD and ACTION property of <FORM> tag.
What is METHOD property?
METHOD property tells the form how to transfer the data to the form processor, which is your CGI script or e-mail address.
What values can be assigned to METHOD property?
We can assign either of the two values to the METHOD property, which are: GET and POST.
What is GET value?
- if the METHOD property of FORM is set to GET, then the data in the form is given to the form processor in the form of environment variable (QUERY_STRING).
- if no value is given to METHOD property of <FORM> tag , the default value is set to GET.
What is POST value?
If the METHOD property of FORM is set to post, then the data in the form is given to the form processor as the standard input to the program.
What is ACTION property?
ACTION property of the <FORM> tag tells what action the form should take when the user presses the SUBMIT button.
What should we do if we would like to receive the e-mail without an attachment in a text form? OR
What should we do if we would want to receive the information as text in our e-mail?
In the <FORM> tag, type ENCTYPE= “TEXT/PLAIN”
ACTION= ‘?’, what should we replace ‘?’ with?
- With the location of your CGI script on your web server that will process the information submitted by your form.
- with the e-mail address, if we would like to get the information to it.
What is the purpose of a text box?
> > A text box allows users to enter a line of text.
text boxes are normally used for entering names and addresses
What is a DEFAULT TEXT VALUE?
A DEFAULT TEXT VALUE appears in the text box when the user views the form.
What is the purpose of default text value?
We can use DEFAULT VALUES to:
- display information about the type of data required
- give users an example of the type of data you are looking for.
- show a popular choice or response
What should we do to specify a default?
Add the VALUE attribute to the <input></input> tag
What is the purpose of a password box?
A password bow allows a reader to enter confidential or secret information, such as credit card number and password.
How does a password box differ from a standard text box?
It differs from a standard text box in a manner that when a user types in any character, an asterisk or a bullet appears for each character typed on screen.
What is the purpose of large text area?
A large text area allows visitors to enter several lines of input. It is ideally used for getting comments and feedbacks from the visitors.
What is the purpose of READONLY attribute?
If we want to display default text in a text area and do not want users to move or edit the text, we can use the READONLY attribute.
How can we use the READONLY attribute?
If we want to use a large text area to explain something about our form or offer detailed instructions, we can place the READONLY attribute without assigning a value within the <textarea> tag.</textarea>
What is the purpose of checkboxes?
Checkboxes allow visitors in a form to choose one or more options.
What do we need to specify while creating checkboxes?
While creating checkboxes, we need to specify the following information:
1. We need to specify a word that describes the group of checkboxes. This is done using the NAME attribute.
2. We need to specify a word that describes each checkbox. This is done using the VALUE attribute.
3. We need to specify the text which appears beside each checkbox on your web page.
What is the purpose of writing checked in the input tag while creating checked boxes/ radio buttons?
If we want the checkbox to be selected automatically, we can write CHECKED in the input tag
What is the CECKED attribute?
A CHECKED attribute can be used while making a web page to show one radio button/checkbox in the group as selected, by default.
What is the purpose of radio buttons?
Radio buttons in a form allow the users to select only one of the several options.
What do we need to specify while creating radio buttons?
While creating radio buttons, we need to specify the following information:
1. We need to specify a word that describes the group of radio buttons. This is done using the NAME attribute.
2. We need to specify a word that describes each radio button. This is done using the VALUE attribute.
3. We need to specify the text which appears beside each radio button on your web page.
Why should we need to make sure that all the radio buttons in a set have the same NAME attribute?
> > When radio buttons have different NAME attributes, the browser treats them as different radio button sets.
This means, the users is able to turn on more than one of them at a time by clicking.
Make sure all the radio buttons in a set have the same NAME attribute to avoid this.
What is the purpose of list box (menu)?
– A list box offers visitors a list of options to choose from.
– Normally, list boxes are used to display lists of products, states, age groups, etc.
What do we need to specify while creating list box?
While creating radio buttons, we need to specify the following information:
1. We need to specify a word that describes the list box. This is done using the NAME attribute.
2. We need to specify a word that describes the content. This is done using the VALUE attribute.
3. We need to specify the text which appears for each list box option on your web page.
What is the purpose of writing selected in option tag while creating a list box (menu)?
If we want a list box option to be selected automatically, we use the CHECKED attribute in the OPTION tag.
How to create a DROP-DOWN list?
> > Type the number of list box entries as the the SIZE attribute value.
This makes the list box appear as a rectangular box that displays all the items in the list.
If the list box is long, it may take up more room on the form than you want, making users scroll to view the selections.
If you prefer to save room on your form, keep the list box size as 1. This creates a DROP-DOWN list.
What is the purpose of SUBMIT button?
A SUBMIT button allows the users to click and send the information they entered in our form to our mail server or our e-mail.
What happens when the user clicks the SUBMIT button?
When the user clicks the SUBMIT button, the data in the form is processed and sent to the destination specified in the form tag
What is the purpose of RESET button?
A RESET buttons allows the user to clear the information they entered in our form and reset the form to its original setting.
