Chapter 2 Quiz- HTML 5
Default width of textfield
20
formaction
Attribute of <input> If this is added, the formaction attribute overrides the action attribute of the <form> element. <form action="demo_form.asp"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="Submit"><br> <input type="submit" formaction="demo_admin.asp" value="Submit as admin"> </form>
Button
<input type="button" value="Hello world!">
Check Boxes
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br> <input type="checkbox" name="vehicle" value="Car">I have a car
checked
Pre-selects an <input> checkbox or radio element
readonly
<input> text is readonly
labels
<label for="male">Male</label> <input type="radio" name="sex" id="male" value="male"><br> Can be in forms
alt attribute
Alternate text for images
<optgroup>
Defines a group of related options in a drop-down list
T/F you need to have a closing bracket for inputs
F
Do all browsers support <datalist>, <keygen>, and <output>?
Not all browsers support all the new form elements. However, you can already start using them; If they are not supported, they will behave as regular text fields.
formtarget
Overrides the target part of the form
What is the purpose of <keygen>?
The <keygen> tag specifies a key-pair generator field used for forms. When the form is submitted, the private key is stored locally, and the public key is sent to the server.
<oninput>
The <output> element represents the result of a calculation (like one performed by a script). <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0 <input type="range" id="a" value="50">100 + <input type="number" id="b" value="50">= <output name="x" for="a b"></output> </form>
formenctype
The formenctype attribute specifies how the form-data should be encoded when submitting it to the server (only for forms with method="post")
formmethod
The formmethod attribute defines the HTTP method for sending form-data to the action URL. The formmethod attribute overrides the method attribute of the <form> element. <form action="demo_form.asp" method="get"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="Submit"> <input type="submit" formmethod="post" formaction="demo_post.asp" value="Submit using POST"> </form>
formnovalidate
The novalidate attribute is a boolean attribute. When present, it specifies that the <input> element should not be validated when submitted. The formnovalidate attribute overrides the novalidate attribute of the <form> element. <form action="demo_form.asp"> E-mail: <input type="email" name="userid"><br> <input type="submit" value="Submit"><br> <input type="submit" formnovalidate value="Submit without validation"> </form>
What are forms used for?
They are used to pass data to a server. An HTML form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements.
nonvalidate
for forms. When present, it specifies that the form-data (input) should not be validated when submitted. <form action="demo_form.asp" novalidate>
type= "multiple"
specifies that a user can enter more than one value in an <input> element
src
specifies the URL of the image to use as a submit button (only for type="image")
max/min
specifies the maximum/minimum value of an <input> element For type= number and date
name
specifies the name of the <input> element
requierd
the field is required to fill out before submitting
autocomplete
used in forms. When a user has entered something before it tries to help <form action="demo_form.asp" autocomplete="on">...
value
value of an <input> element
width/height
width and height of an image in pixels, attribute. Used only for <input type="image"
Preselected value for drop down list
<option value="audi" selected>Audi</option>
Drop down list
<select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select>
Textarea
<textarea rows="10" cols="30"> The cat was playing in the garden. </textarea>
autofocus
When present, it specifies that an <input> element should automatically get focus when the page loads. <input type="text" autofocus>
<input type="search">
Search Google: <input type="search" name="googlesearch"> Behaves like a regular text field
pattern
Specifies a regular expression that the <input> is checked against <input type="text" pattern="[A-Za-z]{3}">
placeholder
Specifies a short hint that describes the expected value of the input element Usual for text
maxlength
Specifies the maximum number of characters allowed in an <input> element
<input type="tel">
Telephone: <input type="tel" name="usrtel">
What is a datalist? What is it used for?
The <datalist> element specifies a list of pre-defined options for an <input> element. The <datalist> element is used to provide an "autocomplete" feature on <input> elements. Users will see a drop-down list of pre-defined options as they input data. Use the <input> element's list attribute to bind it together with a <datalist> element.
Text Field
<input type="text" name="firstname">
color date datetime datetime-local email month number range search tel time url week
<input type="_____">
Fieldset
<fieldset> <legend>Personal info</legend> Name: ... </legend>
Password Field
<input type="password" name="pwd">
Radio Buttons
<input type="radio" name="sex" value="male">Male<br> <input type="radio" name="sex" value="female">Female
Send an email
<form action="MAILTO:[email protected]" method="post" enctype="text/plain"> <input type="text" name="mail" value="your email"><br>
<keygen> code
<form action="demo_keygen.asp" method="get"> Username: <input type="text" name="usr_name"> Encryption: <keygen name="security"> <input type="submit"> </form>
Submit button
<form name="input" action="html_form_action.asp" method="get"> <input type="submit" value="Submit"> </form>
For forms you need to wrap everything in
<form> code </form>
datalist code
<input list="browsers" name="browser"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> New to HTML 5
step
For number inputs specifies the legal number intervals for an input field <input type="number" step="3">
