120 likes | 479 Vues
HTML. Forms – Interactive HTML – Web 2.0. HTML <form>. <!DOCTYPE html> New types for input Degrades gracefully for browsers that do not support the html 5 input types www.w3schools.com/html/html_forms.asp Master the basics For all others use a reference. Basics.
E N D
HTML Forms – Interactive HTML – Web 2.0
HTML <form> • <!DOCTYPE html> • New types for input • Degrades gracefully for browsers that do not support the html 5 input types • www.w3schools.com/html/html_forms.asp • Master the basics • For all others use a reference
Basics • Form http://www.w3schools.com/tags/tag_form.asp • <form> … </form> • A form can contain <input>s such as • text fields, checkboxes, radio-buttons, submit buttons • also • <select> lists, <textarea>, <fieldset>, <legend>, and <label>s • Textbox http://www.w3schools.com/tags/tag_input.asp • <input type=‘text’ /> • short text input (word .. sentence) single-line input • Textareahttp://www.w3schools.com/tags/tag_textarea.asp • <textarea></textarea> • Can handle multi-line input, paragraph(s), memo
<form> attributes • Virtually everything needs a (unique) name attribute (there is an exception) • <form name=‘myform’ … • <input name=‘firstname’ … • Needed to extract form data • Value • <input value=‘initial’ … can be used to specify a default initial value on input elements
<input type=‘text’ /> • <input /> • type attribute specifies input method • <input type=‘text’ renders a normal textbox • <input type= ‘password’ renders a password field • <input type= ‘radio’ renders a radio button • Use a common name value to group • Selecting one deselects others in the same group (same name) • <input type=‘checkbox’ • <input type=‘submit’ value=‘submit’ • Defines a submit button • Usually sends form data to server
New input types for html 5 • Color • Date • Email • Month • Number • Range • url • Week • Unsupported types degrade to normal text fields
More Form elements • <textarea></textarea> • Select (dropdown) list <select name=‘select1’> <option value=‘a’>A</option><option value=‘b’>B</option><option value=‘c’>C</option></select> • Value attribute indicates what is sent to the server. • Selected attribute can be used to set a default
Non-Essential Form Elements • <label> • <fieldset> + <legend> • <optgroup> • <button>