textarea name comments cols 30 rows 4 Enter your commentstextarea password

Textarea name comments cols 30 rows 4 enter your

This preview shows page 41 - 48 out of 64 pages.

<textarea name= "comments" cols= "30" rows= "4" >Enter your comments...</textarea> password Creates a single line text entry box for a password. <p>Password: <input type= "password" name= "password" size= "15" maxlength= "30" ></p> hidden Add a hidden data item to the form that users cannot see. <input type= "hidden" name= "page" value= "34" > radio Creates radio buttons for user to pick just one of the options. <p>Please select your favorite genres: <br> <input type= "radio" name= "genre" value= "action" >Action <input type= "radio" name= "genre" value= "scific" checked >Science Fiction <input type= "radio" name= "genre" value= "drama" >Drama </p> 41
Image of page 41
Input Controls Type Description checkbox Allow users to select (and unselect) one or more options in answer to a question. <p>Please select your favorite music service(s):<br> <input type= "checkbox" name= "service" value= "apple" checked >Apple Music <input type= "checkbox" name= "service" value= "amazon" >Amazon Music <input type= "checkbox" name= "service" value= "spotify" >Spotify </p> select Creates a drop down list box for users to select one option from the list. <p>What smart device do you use for studying?</p> <select name= "devices" > <option value= "ipad" >iPad</option> <option value= "mobile" >Smart Phone</option> <option value= "nbook" >Notebook</option> </select> submit For sending the form data to the server. <input type= "submit" value= "Submit" > reset Defines a reset button that will reset all form values to their default values. <input type= "reset" > 42
Image of page 42
Input Controls (HTML5 Elements) Type Description email Creates a single-line text entry box suitable for entering an email address. <p>Please enter your email address:</p> <input type= "email" name= "email" > <input type= "submit" value= "Submit" > url Creates a single-line text entry box suitable for entering a URL. <p>Please enter your website address:</p> <input type= "url" name= "website" > <input type= "submit" value= "Submit" > date Creates a date input for entering a date. <p>Departure date: <input type= "date" name= "depart" > <input type= "submit" value= "Submit" > </p> search Creates a single-line text entry box suitable for a search string. <p>Google Search: <input type= "search" name= "search" > <input type= "submit" value= "Search" > </p> 43
Image of page 43
More HTML5 Input Controls HTML5 added several new input types: color datetime-local month number range tel time week Refer to “; for more information C3322A Modern Tech on WWW 44
Image of page 44
Character Entities These are special characters for symbols for which there is either no way easy way to type in via a keyboard (such as the copyright symbol or accented characters) or which have a reserved meaning in HTML (for instance the “<” or “>” symbols). They can be used in an HTML document by using the entity name or the entity number. e.g., &nbsp; is &#160; and &copy; is &#169; C3322A Modern Tech on WWW 45
Image of page 45
HTML5 SEMANTIC ELEMENTS
Image of page 46
HTML5 Semantic Elements One substantial problem with modern, pre-HTML5 semantic markup: Most complex web sites are absolutely packed solid with <div> elements.
Image of page 47
Image of page 48

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture