Html

COURSES CODE PLAYGROUND DISCUSS TOP LEARNERS HTML5 Forms, Part 2 5 2/3           Search Options The  <datalist>  tag can be used to define a list of pre-defined options for the search field: <input id="car" type="text" list ="colors" /> < datalist id ="colors"> <option value="Red"> <option value="Green"> <option value="Yellow"> </datalist> Try It Yourself Result: <option>  defines the options in a drop-down list for the user to select.  The ID of the datalist element must match with the list attribute of the input box.

Creating a Search Box The new  search  input type can be used to create a search box: <input id="mysearch" name="searchitem" type=" search " /> Try It Yourself Result: You must remember to set a name for your input; otherwise, nothing will be submitted.

RSES CODE PLAYGROUND DISCUSS TOP LEARNERS HTML5 Forms, Part 1 24 3/3           Forms with Required Fields The " required " attribute is used to make the input elements required. <form  autocomplete =" off "> <label for="e-mail"> Your e-mail address: </label> <input name="Email" type="text" required /> <input type="submit" value="Submit"/> </form> Try It Yourself The form will not be submitted without filling in the required fields. Result: The  autocomplete  attribute specifies whether a form or input field should have autocomplete turned on or off. When autocomplete is on, the browser automatically complete values based on values that the user has entered before. HTML5 added several new input types: - color - date - datetime - datetime-local - email - month - number - range - search - tel - time - url - week New input att...

New Attributes HTML5 has introduced a new attribute called  placeholder . On  <input>  and  <textarea> elements, this attribute provides a hint to the user of what information can be entered into the field. <form> <label for="email"> Your e-mail address: </label> <input type="text" name="email" placeholder ="email@example.com" /> </form> Try It Yourself Result: The  autofocus  attribute makes the desired input focus when the form loads: <form> <label for="e-mail"> Your e-mail address: </label> <input type="text" name="email" autofocus /> </form> Try It Yourself Result: The required attribute tells the browser that the input is required.

HTML5 Forms HTML5 brings many features and improvements to web form creation. There are new attributes and input types that were introduced to help create better experiences for web users. Form creation is done in HTML5 the same way as it was in HTML4: <form> <label> Your name:</label> <input id="user" name="username" type="text" /> </form> Try It Yourself Use the novalidate attribute to avoid form validation on submissions.

The scale() Method The  scale()  method scales the current drawing. It takes two parameters: - The number of times by which the image should be scaled in the X-direction. - The number of times by which the image should be scaled in the Y-direction. var canvas = document.getElementById('canvas1'); ctx =canvas.getContext('2d'); ctx.font="bold 22px Tahoma"; ctx.textAlign="start"; ctx.fillText("start", 10, 30); ctx.translate(100, 150); ctx.fillText("after translate", 0, 0); ctx.rotate(1); ctx.fillText("after rotate", 0, 0); ctx. scale(1.5, 4) ; ctx.fillText("after scale", 0,20); Try It Yourself This will scale the canvas 1.5 times in the X-direction, and 4 times in Y-direction: If you scale a drawing, all future drawings will also be scaled.