1 / 22

Learn Advanced and Basic HTML - Lesson 4 (ii)

With HTML you can create your own Website. This tutorial teaches you everything about HTML. For full HTML course visit our website www.training-n-development.com

trainingdevelopment
Download Presentation

Learn Advanced and Basic HTML - Lesson 4 (ii)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Learn HTML BasicsLesson No : 04 (Second Part) Publisher : Attitude Academy

  2. The <input> Attribute The <input> element is the most important form element. The <input> element has many variations, depending on the type attribute. Here are the types used in this chapter:

  3. Type=“text” <input type="text"> defines a one-line input field for text input: Example <!DOCTYPE html><html><head><title>Page Title</title></head> <body> <form> First name:<br> <input type="text" name="firstname"><br> Last name:<br> <input type="text" name="lastname"> </form> </body> </html>

  4. Type=“email” The <input type="email"> is used for input fields that should contain an e-mail address. Depending on browser support, the e-mail address can be automatically validated when submitted. Some smart phones recognize the email type, and adds ".com" to the keyboard to match email input. <p><b>Note:</b>type="email" is not supported in IE9 and earlier.</p> EXAMPLE <body> <form action="action_page.php"> E-mail: <input type="email" name="email"> <input type="submit"> </form> </body>

  5. Type=“password” <input type="password"> defines a password field: <body> <form action=""> User name:<br> <input type="text" name="userid"> <br> User password:<br> <input type="password" name="psw"> </form> <p>The characters in a password field are masked (shown as asterisks or circles).</p> </body>

  6. Type=“Radio” <input type="radio"> defines a radio button. Radio buttons let a user select ONE of a limited number of choices: Example: <!DOCTYPE html><html><head><title>Page Title</title></head> <body> <form> <input type="radio" name="gender" value="male" checked> Male<br> <input type="radio" name="gender" value="female"> Female<br> <input type="radio" name="gender" value="other"> Other </form> </body> </html>

  7. Type=“checkbox” <input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or MORE options of a limited number of choices. <body> <form action="action_page.php"> <input type="checkbox" name="vehicle1" value="Bike">I have a bike <br> <input type="checkbox" name="vehicle2" value="Car">I have a car <br> <input type="submit"> </form> </body>

  8. Type=“color” The <input type="color"> is used for input fields that should contain a color. Depending on browser support, a color picker can show up in the input field. <p><b>Note:</b> type="color" is not supported in Internet Explorer / Edge.</p> EXAMPLE <body> <form action="action_page.php"> Select your favorite color: <input type="color" name="favcolor" value="#ff0000"> <input type="submit"> </form> </body>

  9. Type=“number” The <input type="number"> is used for input fields that should contain a numeric value. You can set restrictions on the numbers. Depending on browser support, the restrictions can apply to the input field. <p><b>Note:</b> type="number" is not supported in IE9 and earlier.</p> EXAMPLE <body> <form action="action_page.php"> Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5"> <input type="submit"> </form> </body>

  10. Type=“date” The <input type="date"> is used for input fields that should contain a date. Depending on browser support, a date picker can show up in the input field. <p><strong>Note:</strong> type="date" is not supported in Internet Explorer 10 and earlier versions.</p> EXAMPLE <body> <form action="action_page.php"> Birthday: <input type="date" name="bday"> <input type="submit"> </form> </body>

  11. Type=“datetime” The <input type="datetime"> allows the user to select a date and time (with time zone). (Note: type="datetime" is not supported in Chrome, Firefox, or IE) EXAMPLE <body> <form action="action_page.php"> Birthday (date and time): <input type="datetime" name="bdaytime"> <input type="submit"> </form> </body>

  12. Type=“month” The <input type="month"> allows the user to select a month and year.Depending on browser support, a date picker can show up in the input field. <body> <form action="action_page.php"> Birthday (month and year): <input type="month" name="bdaymonth"> <input type="submit"> </form> <p><strong>Note:</strong> type="month" is not supported in Internet Explorer 10 and earlier versions.</p> </body>

  13. Type=“range” The <input type="range"> is used for input fields that should contain a value within a range. Depending on browser support, the input field can be displayed as a slider control. (Note : type="range" is not supported in Internet Explorer 9 and earlier versions. ) EXAMPLE <body> <form action="action_page.php" method="get"> Points: <input type="range" name="points" min="0" max="10"> <input type="submit"> </form> </body>

  14. Type=“datetime-local” The <input type="datetime-local"> allows the user to select a date and time (no time zone).Depending on browser support, a date picker can show up in the input field. ( Note: type="time" is not supported in Firefox, or Internet Explorer 10 and earlier versions.) EXAMPLE <body> <form action="action_page.php"> Birthday (date and time): <input type="datetime-local" name="bdaytime"> <input type="submit" value="Send"> </form> </body>

  15. Type=“time” The <input type="time"> allows the user to select a time (no time zone). Depending on browser support, a time picker can show up in the input field. <body> <form action="action_page.php"> Select a time: <input type="time" name="usr_time"> <input type="submit"> </form> <p><strong>Note:</strong> type="time" is not supported in Firefox, or Internet Explorer 10 and earlier versions.</p> </body>

  16. Type=“file” <input type="reset"> defines a reset button that will reset all form values to their default values If you change the input values and then click the "Reset" button, the form-data will be reset to the default values. <body> <form action="action_page.php"> Choose file like (PDF etc) <input type="file" > </form> </body>

  17. Type=“reset” <input type="reset"> defines a reset button that will reset all form values to their default values If you change the input values and then click the "Reset" button, the form-data will be reset to the default values. <body> <form action="action_page.php">  First name:<br>  <input type="text" name="firstname" value="Mickey"><br>  Last name:<br>  <input type="text" name="lastname" value="Mouse"><br><br>  <input type="submit" value="Submit">  <input type="reset"></form> </body>

  18. Type=“search” The <input type="search"> is used for search fields (a search field behaves like a regular text field). EXAMPLE <body> <form action="action_page.php"> Search Google: <input type="search" name="googlesearch"> <input type="submit"> </form> </body>

  19. Type=“Button” <input type="submit"> defines a button for submitting a form to a form-handler. The form-handler is typically a server page with a script for processing input data. The form-handler is specified in the form's action attribute: <body> <form action="action_page.php"> First name:<br> <input type="text" name="firstname" value="Mickey"> <br> Last name:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="button" value="Submit"> </form> </body>

  20. Type=“Submit” <input type="submit"> defines a button for submitting a form to a form-handler. The form-handler is typically a server page with a script for processing input data. The form-handler is specified in the form's action attribute: <body> <form action="action_page.php"> First name:<br> <input type="text" name="firstname" value="Mickey"> <br> Last name:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Submit"> </form> </body>

  21. PRACTICAL IMPLEMENTATION

  22. Visit Us : Attitude Academy

More Related