HTML Forms Flashcards
- One of the most used form element
- can be displayed in several ways,
depending on the type attribute
input element
- defines drop-down list
select element
- defines an option that can be
selected in <select> element</select>
option element
attribute that allows the user to select more than one value in <select> element</select>
multiple attribute
- defines a multi-line input field
textarea element
attribute that specifies the visible width of a text area.
cols attribute
attribute that specifies the visible number of lines in a text area.
rows attribute
- defines a clickable button
- Always specify the type attribute
button element
What will happen when you click this button?:
button type=”button” onclick=”alert(‘Hello World!’)”>
Click Me!</button
After clicking the button a message box will appear
used to group related data in a
form.
fieldset element
defines a caption for the <fieldset>
element.
legend 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
datalist element
defines a single-line text input field
input type=”text”
defines password field
input type=”password”
- defines button for sumitting form data to a form-handler
input type=”submit”
typically a server page with a script for processing input data
form-handler
defines a reset button that will reset all form values to their default values
input type=”reset”
TRUE OR FALSE:
Radio buttons let a user select ONLY ONE
of a limited number of choices:
TRUE
- defines a radio button
- the name of the elements must be the same
input type=”radio”
- defines a checkbox
input type=”checkbox”
lets a user select zero or more options of a limted number of choices
Checkbox
defines a button
input type=”button”
used for input fields that should contain a color
input type=”color”
used for input fields that should contain a date
input type=”date”
Can you add min and max attributes to add restrictions to dates?
Yes
specifies a date and time input field with no timezone
input type=”datetime-local”
used for input fields that should contain an e-mail address
input type=”email”
allows the user to select a month and year
input type=”month”
defines a file-select field and a “browse” button for file-upload
input type=”file”
- defines a numeric input field
- set restrictions on what numbers are accepted
input type=”number”
defines a control for entering a number whose exact value is not important (slider)
input type=”range”
default range of input type range
0 to 100
used for search fields
input type=”search”
used for input fields that should contain a telephone number
input type=”tel”
allows the user to select a time
input type=”time”
used for input fields that should contain a url address
input type=”url”
allows the user to select a week and year
input type=”week”
attribute that specifies an initial value for an input field:
value attribute
specifies that an input field is read-only.
readonly attribute
cannot be modified (however, a user can tab to it, highlight it, and copy the text from it).
readonly input field
- specifies that an input field should be disabled.
- unusable and unclickable
- value of a disabled input field will not be sent when submitting the form
disabled
- specifies the visible width, in characters, of an input field.
- default value is 20
size attribute
input types that the size attribute works with
- text
- search
- tel
- url
- password
specifies the maximum number
of characters allowed in an input field.
maxlength
specify the minimum and maximum values for an input field
min and max attributes
specifies a regular expression that the input field’s value is checked against, when the form is submitted.
pattern attribute
specifies short a hint that describes the expected value of an input field (a sample value or a short description of the expected format).
placeholder attribute
specifies that an input field must be filled out before submitting the form.
required attribute
specifies the legal number intervals
for an input field.
step
specifies that an input field should automatically get focus when the page loads
autofocus attribute
specify the height and width of an <input></input> element.
height and width attribute
specifies whether a form or an input field should have autocomplete on or off.
autocomplete attribute
allows the browser to predict the value. When a user starts to type in a field, the browser should display options to fill in the field, based on earlier typed values.
autocomplete attribute
