Post
Ask Question

HTML5 New Form Attributes-Part 4

Height and Width Attribute

 
The height and width attributes specify the height and width of an <input> element.
 
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".
 
Note: These attributes are used with input="image" only.
 
It is always necessary to specify both the height and width attributes for images. If the height and width are set then the space required for the image is reserved when the page is loaded.
 
Syntax
 
<input type="image" src="someimage.jpg" width="pixels" height="pixels" />
 
Browser Support
 
It is supported in all major browsers such as Chrome, Internet Explorer, Firefox, Opera and Safari.
 
Example
  1. <!DOCTYPE html>  
  2. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <meta charset="utf-8" />  
  5.     <title>Height and Width Attribute</title>  
  6. </head>  
  7. <body>  
  8.     <h3>HTML5 Height and Width Attribute</h3>  
  9.     <form action="form.asp">  
  10.         First name:  
  11.         <input type="text" name="fname"><br>  
  12.         Last name:  
  13.         <input type="text" name="lname"><br>  
  14.         Email:  
  15.         <input type="email" name="email"><br>  
  16.         <input type="image" src="D:\Ashwani\images.jpg" alt="Submit" width="90" height="50">  
  17.     </form>  
  18. </body>  
  19. </html> 
Output
 
widhei.jpg
 

List Attribute

 
The list attribute refers to a <datalist> tag that contains pre-defined options for an <input> element. The list attribute enables the user to associate a list of options with a particular field.
 
The <datalist> tag is a list of options that will display a simple text field that drops down a list of suggested answers when focused. The <datalist> is new in HTML5.
 
Syntax
 
<inputtype="text"list="characters">
 
Browser Support
 
It is supported in all major browsers such as Chrome, Internet Explorer, Firefox and Opera except Safari.
 
Example
  1. <!DOCTYPE html>  
  2. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <meta charset="utf-8" />  
  5.     <title>List Attribute</title>  
  6. </head>  
  7. <body>  
  8.     <h3>HTML5 List Attribute</h3>  
  9.     <form action="form.asp" method="get">  
  10.         Websites:  
  11.         <input type="url" list="urls" id="website" name="website">  
  12.         <datalist id="urls">  
  13.             <option value="http://www.google.com">  
  14.                 <option value="http://www.gmail.com">  
  15.                     <option value="http://www.facebook.com">  
  16.         </datalist>  
  17.         <input type="submit">  
  18.     </form>  
  19. </body>  
  20. </html> 
Output
 
list.jpg
 

Min and Max Attribute

 
These are applicable to input controls whose type attribute has been set to number or range. The min and max attributes define the minimum and maximum values that will be accepted. The step attribute defines the allowed interval between values.
  • max="number"  
          specifies the maximum value allowed for the input field.
  • min="number" 
          specifies the minimum value allowed for the input field.
  • step="any number" 
          specifies the number intervals for the input field
 
For example, if min is set to "0" and step is set to "1", then only the values 0, 1, 2, 3, and so on are allowed.
 
Note: The "min", "max", and "step" attributes works with the following <input> types: date-pickers, number and range.
 
Syntax
 
<input type="number" name="num" min="1" max="10" step="3" />
 
Browser Support
 
It is supported in all major browsers such as Chrome, Internet Explorer,  Safari and Opera except Firefox
 
Example
  1. <!DOCTYPE html>  
  2. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <meta charset="utf-8" />  
  5.     <title>Min and Max Attributes</title>  
  6. </head>  
  7. <body>  
  8.     <h3>HTML5 Min and Max Attributes</h3>  
  9.     <form action="form.asp">  
  10.         Quantity:  
  11.   <input type="number" name="quantity" min="1" max="20" step="2"><br>  
  12.         Tickets:  
  13.   <input type="number" name="tickets" id="tickets" min="1" max="10"><br>  
  14.         <input type="submit">  
  15.     </form>  
  16. </body>  
  17. </html>   
Output
minmax.jpg


Similar Articles