Html Course


The new features added in HTML5 are not fully supported by all major browser, the browsers with the most support for HTML5 are: Opera, Chrome and Mozill Firefox.


HTML5 new Input types

HTML5 adds a number of new input types for form (datetime, datetime-local, date, month, week, time, number, range, email, url, search, and color), which are listed below:


    type='date' - Creates a date input control, such as a pop-up calendar, for specifying a date (year, month, day). The initial value must be provided in ISO date format.
<input type='date' name='set_date' value='2011-10-15' />
Date

    type='datetime' - Creates a combined date/time input field. The value is an ISO formatted date and time that is defined and submitted as UTC time.
<input type='datetime' name='dt' value='2011-06-14T01:26:32:00Z' />
Datetime

    type='datetime-local' - Creates a date/time input control, the same as 'datetime', but assuming the time is in the local time zone. Initial values must be provided in ISO date/time format.
<input type='datetime-local' name='dtl' value='2012-05-23T13:44:16:00'>

    type='month' - Creates a date input control (such as a pop-up calendar), for specifying a particular month in a year.
<input type='month' value='2012-09' name='mnt' />
Month

    type='week' - Creates a date input control (such as a pop-up calendar), for specifying a particular week in a year. Values are provided in ISO week numbering format.
<input type='week' name='weeks' value='2011-W34' />
Week

    type='time' - Creates a date input control for specifying a time (hour, minute, seconds, fractional_seconds).
<input type='time' name='currenttime' value='18:12:00' />
Time

    type='tel' - Creates an input field for entering and editing a telephone number.
<input type='tel' name='hometel' value='123-888-2012' />

    type='url' - is used for input fields that should contain a URL address. The value of the url field is automatically validated when the form is submitted (if it is not in proper URL format, return an error message).
<input type='url' name='site' size='25' value='https://coursesweb.net' />

    type='number' - is used to create input fields that should contain a numeric value. You can also set restrictions on what numbers are accepted, with the 'min', 'max' and 'step' attributes.
<input type='number' name='points' min='5' max='80' />
Number

    type='range' - Creates a slider control that should contain a value from a range of numbers. The range starts at the value provided by the 'min' attribute (0 by default) and ends at the value provided by the 'max' attribute (100 by default).
<input type='range' name='val' min='1' max='10' />
Range

    type='email' - is used for input fields that should contain an e-mail address. The value of the email field is automatically validated when the form is submitted.
Email; <input type='email' name='email' />
Email:

    type='search' - Creates a one-line text input box for entering a search query, like a site search.
Search: <input type='search' name='srch' size='25' value='Search term' />
Search:

    type='color' - Creates a color well control for selecting a color value.
<input type='color' name='get_color' />
Color

New attributes for <form> added in HTML5


New input attributes

    autofocus - specifies that a field should automatically get focus when a page is loaded. It workks in all <input> fields.
Name: <input type='text' name='name1' autofocus='autofocus' />

    form='form_id' - Explicitly associates the input control with the form which has id='form_id'. With this method, the input control does not need to be a child of a form element. It works in all <input> fields.
<form action='script.php' method='post' id='idf'>
 Name:<input type='text' name='fname' />
 <input type='submit' value='Send' />
</form>
E-mail: <input type='email' name='email' form='idf' />

    formaction='url' - Overrides the form 'action' attribute, sending form-data to the specified 'url'.
    formenctype='content_type' - Overrides the form 'enctype' attribute.
    formmethod='get | post | put | delete' - Overrides the form 'method' attribute. The 'put' and 'delete' values are new in HTML5.
    formnovalidate - Overrides the form 'novalidate' attribute.
    formtarget='target' - Overrides the form 'target' attribute.
    - These Form override attributes are used only with a submit button (type 'submit' or 'image').
<form action='script.php' method='post' id='idf'>
 E-mail: <input type='email' name='email' /><br />
 <input type='submit' value='Submit' /><br />
 <input type='submit' formaction='script_2.php' value='Submit to script_2' /><br />
 <input type='submit' formnovalidate='formnovalidate' value='Submit without validation' />
</form>

    height='pixels' - Specifies the height of the button image when the input type is set to 'image'.
    width='pixels' - Specifies the width of the button image when the input type is set to 'image'.
    - These attributes are used with input='image' only:
<input type='image' src='img_submit.gif' width='80' height='23' />

    list='id_datalist' - Indicates that the control has a list of predefined options for the user, which are provided by a datalist element. The value of the list attribute ('id_datalist') is the id of the associated <datalist>.
- It works with the following <input> types: text, search, url, tel, email, datepickers, number, range, color.
<h4>Example list attribute</h4>

Website: <input type='url' list='sites' name='link' />
<datalist id='sites'>
 <option label='CoursesWeb' value='https://coursesweb.net' />
 <option label='MarPlo' value='https://marplo.net' />
 <option label='Games' value='https://gamv.eu' />
 <option label='W3Schools' value='https://www.w3schools.com' />
</datalist>
</form>
    max='number' - specifies the maximum value allowed for the input field. The 'max' value must not be less than the 'min' value.
    min='number' - specifies the minimum value allowed for the input field.
    step='any/number' - specifies the number intervals for the input field (if step='3', legal numbers could be -3,0,3,6, etc).
    - The 'min', 'max', and 'step' attributes works with the following <input> types: date-pickers, number, range.
This code shows a field that accepts values between 1 and 10, with a step of 3 (legal numbers are 3, 6 and 9):
<input type='number' name='num' min='1' max='10' step='3' />

    multiple - Indicates the user is allowed to specify more than one value.
- It works with the following <input> types: email, file.
<input type='file' name='img' multiple='multiple' />

    pattern='regexp' - specifies a pattern (a regular expression) used to validate an input field. The 'title' attribute can be used with pattern to provide a description of the expected format of the input.
- It works with the following <input> types: text, search, url, tel, email, password.
The code below shows a text field that can only contain five characters (letters and numbers only):
<input type='text' name='pass' pattern='[A-z0-9]{5}' title='Five characters: letters and numbers' />

    placeholder='text' - Provides a short hint or example to help the user enter the correct data. (for a longer description, use the 'title' attribute).
The hint is displayed in the input field when it is empty, and disappears when the field gets focus.
- It works with the following <input> types: text, search, url, tel, email, password.
<input type='search' name='src' placeholder='Search CoursesWeb' />

    required - indicates that an input field must be filled out before submitting.
- works with the following <input> types: text, search, url, tel, email, password, date-pickers, number, checkbox, radio, file.
<input type='text' name='name1' required='required' />

Other new Form elements in HTML5

<datalist> ... </datalist> tag

The datalist element should contain an 'id' attribute and <option> ... </option> tag(s).
Creates a drop-down menu of suggestions (via the 'option' element), providing an 'auto-complete' function as the user types in the input field which use the 'list' attribute to refer to the 'id' of the datalist.
The <option> tag must have a 'value' attribute.

Example:
<h4>Example datalist tag</h4>

Website: <input type='url' list='sites' name='link' />
<datalist id='sites'>
 <option label='CoursesWeb' value='https://coursesweb.net' />
 <option label='MarPlo' value='https://marplo.net' />
 <option label='Games' value='https://gamv.eu' />
 <option label='W3Schools' value='https://www.w3schools.com' />
</datalist>

<keygen /> tag

The keygen element is used to generate key pairs (one private and one public) to provide a secure way to authenticate users.
The private key is stored on the client, and the public key is sent to the server.
The browser support for this element is not good enough to be a useful security standard.

Example:
<h4>Example keygen</h4>

<form action='#' id='idf' method='post'>
 Username: <input type='text' name='user' /><br>
 Encryption: <keygen name='security' /><br>
 <input type='submit' value='Submit' />
</form>

<output> </output> tag

Represents the result of a calculation, most likely the output of a script.
Total: <output name='total' onformchange='calc()'>0</output>
- Here, the calc() function can be part of a JavaScript script.

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag defines the clickable areas inside the image map?
<map> <img> <area>
<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>
Which CSS property defines what is done if the content in a box is too big for its defined space?
display overflow position
#id {
  overflow: auto;
}
Click on the event which is triggered when the mouse is positioned over an object.
onclick onmouseover onmouseout
document.getElementById("id").onmouseover = function(){
  document.write("Have Good Life");
}
Indicate the PHP variable that contains data added in URL address after the "?" character.
$_SESSION $_GET $_POST
if(isset($_GET["id"])) {
  echo $_GET["id"];
}
New Form elements and attributes in HTML5

Last accessed pages

  1. The School for Gods (5713)
  2. Zodiac Signs JavaScript code (10966)
  3. addChild and removeChild (7883)
  4. The Mastery of Love (6652)
  5. SHA512 Encrypt hash in JavaScript (24680)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (316)
  2. PHP Unzipper - Extract Zip, Rar Archives (108)
  3. Read Excel file data in PHP - PhpExcelReader (100)
  4. SHA1 Encrypt data in JavaScript (81)
  5. Get and Modify content of an Iframe (73)
Chat
Chat or leave a message for the other users
Full screenInchide