25th TUTORIAL ON HTML FORMS PATR 4TH FORMS ATTRIBUTES

4TH PART ON FORMS INPUT ATTRIBUTES 

HTML Input Attributes

This chapter describes the different attributes for the HTML <input> element.

The value Attribute

The input value attribute specifies an initial value for an input field:

Example

Input fields with initial (default) values:

<!DOCTYPE html>

<html>

<body>

<h1>The input value attribute</h1>

<p>The value attribute specifies an initial value for an input field:</p>

<form action="/action_page.php">

  <label for="fname">First name:</label><br>

  <input type="text" id="fname" name="fname" value="HAPPY"><br>

  <label for="lname">Last name:</label><br>

  <input type="text" id="lname" name="lname" value="RAWAT"><br><br>

  <input type="submit" value="Submit">

</form>

</body>

</html>

OUTPUT

The input value attribute

The value attribute specifies an initial value for an input field:







The readonly Attribute

The input readonly attribute specifies that an input field is read-only.

A read-only input field cannot be modified (however, a user can tab to it, highlight it, and copy the text from it).

The value of a read-only input field will be sent when submitting the form!

Example

A read-only input field:

<!DOCTYPE html>

<html>

<body>

<h1>The input readonly attribute</h1>

<p>The readonly attribute specifies that an input field should be read-only (cannot be changed):</p>

<form action="/action_page.php">

  <label for="fname">First name:</label><br>

  <input type="text" id="fname" name="fname" value="HAPPY" readonly><br>

  <label for="lname">Last name:</label><br>

  <input type="text" id="lname" name="lname" value="RAWAT"><br><br>

  <input type="submit" value="Submit">

</form>

</body>

</html>

OUTPUT

The input readonly attribute

The readonly attribute specifies that an input field should be read-only (cannot be changed):








The disabled Attribute

The input disabled attribute specifies that an input field should be disabled.

A disabled input field is unusable and un-clickable.

The value of a disabled input field will not be sent when submitting the form!

Example

A disabled input field:

<!DOCTYPE html>

<html>

<body>

<h1>The input disabled attribute</h1>

<p>The disabled attribute specifies that an input field should be disabled (unusable and un-clickable):</p>

<form action="/action_page.php">

  <label for="fname">First name:</label><br>

  <input type="text" id="fname" name="fname" value="HAPPY" disabled><br>

  <label for="lname">Last name:</label><br>

  <input type="text" id="lname" name="lname" value="RAWAT"><br><br>

  <input type="submit" value="Submit">

</form>

</body>

</html>

OUTPUT

The input disabled attribute

The disabled attribute specifies that an input field should be disabled (unusable and un-clickable):








The size Attribute

The input size attribute specifies the visible width, in characters, of an input field.

The default value for size is 20.

Note: The size attribute works with the following input types: text, search, tel, url, email, and password.

Example

Set a width for an input field:

<!DOCTYPE html>

<html>

<body>

<h1>The input size attribute</h1>

<p>The size attribute specifies the width (in characters) of an input field:</p>

<form >

  <label for="fname">First name:</label><br>

  <input type="text" id="fname" name="fname" size="50"><br>

  <label for="pin">PIN:</label><br>

  <input type="text" id="pin" name="pin" size="4"><br><br>

  <input type="submit" value="Submit">

</form>

</body>

</html>

OUTPUT

The input size attribute

The size attribute specifies the width (in characters) of an input field:








The maxlength Attribute

The input maxlength attribute specifies the maximum number of characters allowed in an input field.

Note: When a maxlength is set, the input field will not accept more than the specified number of characters. However, this attribute does not provide any feedback. So, if you want to alert the user, you must write JavaScript code.

Example

Set a maximum length for an input field:

<!DOCTYPE html>

<html>

<body>

<h1>The input maxlength attribute</h1>

<p>The maxlength attribute specifies the maximum number of characters allowed in an input field:</p>

<form action="/action_page.php">

  <label for="fname">First name:</label><br>

  <input type="text" id="fname" name="fname" size="50"><br>

  <label for="pin">PIN:</label><br>

  <input type="text" id="pin" name="pin" maxlength="4" size="4"><br><br>

  <input type="submit" value="Submit">

</form>

</body>

</html>

OUTPUT

The input maxlength attribute

The maxlength attribute specifies the maximum number of characters allowed in an input field:








The multiple Attribute

The input multiple attribute specifies that the user is allowed to enter more than one value in an input field.

The multiple attribute works with the following input types: email, and file.

Example

A file upload field that accepts multiple values:

<!DOCTYPE html>

<html>

<body>

<h1>The input multiple attributes</h1>

<p>The multiple attribute specifies that the user is allowed to enter more than one value in an input field.</p>

<form action="/action_page.php">

  <label for="files">Select files:</label>

  <input type="file" id="files" name="files" multiple><br><br>

  <input type="submit" value="Submit">

</form>

<p>To select multiple files, hold down the CTRL or SHIFT key while selecting.</p>

</body>

</html>

OUTPUT

The input multiple attributes

The multiple attribute specifies that the user is allowed to enter more than one value in an input field.

 

To select multiple files, hold down the CTRL or SHIFT key while selecting.

The pattern Attribute

The input pattern attribute specifies a regular expression that the input field's value is checked against, when the form is submitted.

The pattern attribute works with the following input types: text, date, search, url, tel, email, and password.

Example

An input field that can contain only three letters (no numbers or special characters):

<!DOCTYPE html>

<html>

<body>

<h1>The input pattern attribute</h1>

<p>The pattern attribute specifies a regular expression that the input element's value is checked against.</p>

<form action="/action_page.php">

  <label for="country_code">Country code:</label>

  <input type="text" id="country_code" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code"><br><br>

  <input type="submit" value="Submit">

</form>

<p><strong>Note:</strong> The pattern attribute of the input tag is not supported in Safari 10 (or earlier).</p>

</body>

</html>

OUTPUT

The input pattern attribute

The pattern attribute specifies a regular expression that the input element's value is checked against.

 

Note: The pattern attribute of the input tag is not supported in Safari 10 (or earlier).

The placeholder Attribute

The input placeholder attribute specifies short a hint that describes the expected value of an input field (a sample value or a short description of the expected format).

The short hint is displayed in the input field before the user enters a value.

The placeholder attribute works with the following input types: text, search, url, tel, email, and password.

Example

An input field with a placeholder text:

<!DOCTYPE html>

<html>

<body>

<h1>The input placeholder attribute</h1>

<p>The placeholder attribute specifies a short hint that describes the expected value of an input field.</p>

<form action="/action_page.php">

  <label for="phone">Enter a phone number:</label>

  <input type="tel" id="phone" name="phone" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"><br><br>

  <input type="submit" value="Submit">

</form>

</body>

</html>

OUTPUT

The input placeholder attribute

The placeholder attribute specifies a short hint that describes the expected value of an input field.

 


The required Attribute

The input required attribute specifies that an input field must be filled out before submitting the form.

The required attribute works with the following input types: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.

<!DOCTYPE html>

<html>

<body>

<h1>The input required attribute</h1>

<p>The required attribute specifies that an input field must be filled out before submitting the form.</p>

<form action="/action_page.php">

  <label for="username">Username:</label>

  <input type="text" id="username" name="username" required>

  <input type="submit" value="Submit">

</form>

<p><strong>Note:</strong> The required attribute of the input tag is not supported in Safari prior version 10.1.</p>

</body>

</html>

OUTPUT

The input required attribute

The required attribute specifies that an input field must be filled out before submitting the form.

  

Note: The required attribute of the input tag is not supported in Safari prior version 10.1.

The step Attribute

The input step attribute specifies the legal number intervals for an input field.

Example: if step="3", legal numbers could be -3, 0, 3, 6, etc.

Tip: This attribute can be used together with the max and min attributes to create a range of legal values.

The step attribute works with the following input types: number, range, date, datetime-local, month, time and week.

Example

An input field with a specified legal number intervals:

<!DOCTYPE html>

<html>

<body>

<h1>The input step attribute</h1>

<p>The step attribute specifies the legal number intervals for an input element.</p>

<form action="/action_page.php">

  <label for="points">Points:</label>

  <input type="number" id="points" name="points" step="3">

  <input type="submit" value="Submit">

</form>

</body>

</html>

OUTPUT

The input step attribute

The step attribute specifies the legal number intervals for an input element.

  

The autofocus Attribute

The input autofocus attribute specifies that an input field should automatically get focus when the page loads.

Example

Let the "First name" input field automatically get focus when the page loads:

<!DOCTYPE html>

<html>

<body>

<h1>The input autofocus attribute</h1>

<p>The autofocus attribute specifies that the input field should automatically get focus when the page loads.</p>

<form action="/action_page.php">

  <label for="fname">First name:</label><br>

  <input type="text" id="fname" name="fname" autofocus><br>

  <label for="lname">Last name:</label><br>

  <input type="text" id="lname" name="lname"><br><br>

  <input type="submit" value="Submit">

</form>

</body>

</html>

OUTPUT

The input autofocus attribute

The autofocus attribute specifies that the input field should automatically get focus when the page loads.






The height and width Attributes

The input height and width attributes specify the height and width of an <input type="image"> element.

The list Attribute

The input list attribute refers to a <datalist> element that contains pre-defined options for an <input> element.

Example

An <input> element with pre-defined values in a <datalist>:

<!DOCTYPE html>

<html>

<body>

<h1>The input list attribute</h1>

<p>The list attribute refers to a datalist element that contains pre-defined options for an input element.</p>

<form action="/action_page.php">

  <input list="browsers" name="browser">

  <datalist id="browsers">

    <option value="Internet Explorer">

    <option value="Firefox">

    <option value="Chrome">

    <option value="Opera">

    <option value="Safari">

  </datalist>

  <input type="submit" value="Submit">

</form>

<p><b>Note:</b> The datalist tag is not supported in Safari 12.0 (or earlier).</p>

</body>

</html>

OUTPUT

The input list attribute

The list attribute refers to a datalist element that contains pre-defined options for an input element.

 

Note: The datalist tag is not supported in Safari 12.0 (or earlier).

The autocomplete Attribute

The input autocomplete attribute specifies whether a form or an input field should have autocomplete on or off.

Autocomplete allows the browser to predict the value. When a user starts to type in a field, the browser should display options to fill in the field, based on earlier typed values.

The autocomplete attribute works with <form> and the following <input> types: text, search, url, tel, email, password, datepickers, range, and color.

<!DOCTYPE html>

<html>

<body>

<h1>The autocomplete attribute</h1>

<p>The autocomplete attribute specifies whether or not an input field should have autocomplete enabled.</p>

<p>Fill in and submit the form, then reload the page to see how autocomplete works.</p>

<p>Notice that autocomplete is "on" for the form, but "off" for the e-mail field!</p>

<form action="/action_page.php" autocomplete="on">

  <label for="fname">First name:</label>

  <input type="text" id="fname" name="fname"><br><br>

  <label for="lname">Last name:</label>

  <input type="text" id="lname" name="lname"><br><br>

  <label for="email">Email:</label>

  <input type="email" id="email" name="email" autocomplete="off"><br><br>

  <input type="submit" value="Submit">

</form>

</body>

</html>

OUTPUT

The autocomplete attribute

The autocomplete attribute specifies whether or not an input field should have autocomplete enabled.

Fill in and submit the form, then reload the page to see how autocomplete works.

Notice that autocomplete is "on" for the form, but "off" for the e-mail field!

 

 

 



FILE DOWNLOAD LINK BELOW 

Comments

Post a Comment

Popular posts from this blog

HTML FORMS INPUT TYPES CHAPTER 25 PART THREE

Image
25 th TUTORIAL ON HTML FORMS INPUT TYPES PART THREE HTML Input Types This chapter describes the different types for the HTML  <input>  element.   HTML Input Types Here are the different input types you can use in HTML: <input type="button"> <input type="checkbox"> <input type="color"> <input type="date"> <input type="datetime-local"> <input type="email"> <input type="file"> <input type="hidden"> <input type="image"> <input type="month"> <input type="number"> <input type="password"> <input type="radio"> <input type="range"> <input type="reset"> <input type="search"> <input type="submit"> <input type="tel"> <input type="text">
Read more

HTML5 COMMENTS & CSS CHAPTER 8

Image
EIGHTH TUTORIAL ON HTML COMMENTS & CSS HTML comments are not displayed in the browser, but they can help document your HTML source code. HTML Comment Tags You can add comments to your HTML source by using the following syntax: <!-- Write your comments here --> With comments you can place notifications and reminders in your HTML: <!DOCTYPE html> <html> <body> <!-- This is a comment --> <p>This is a paragraph.</p> <!-- Comments are not displayed in the browser --> </body> </html> OUTPUT This is a paragraph. Comments are also great for debugging HTML, because you can comment out HTML lines of code, one at a time, to search for errors: <!DOCTYPE html> <html> <body> <!-- Do not display this at the moment <img border="0" src="pic_trulli.jpg" alt="Trulli"> --> </body> HTML  Styles – CSS
Read more

HTML 5 BASIC TAG CHAPTER 3

Image
3 RD TUTORIAL ON HTML 5 BASICS TAGS           HTML Documents Tag All HTML documents must start with a document type declaration:  <!DOCTYPE html> . The HTML document itself begins with  <html>  and ends with  </html> . The visible part of the HTML document is between  <body>  and  </body> . HTML Headings Tags HTML headings are defined with the  <h1>  to  <h6>  tags. <h1>  defines the most important heading.  <h6>  defines the least important heading EXAMPLE <!DOCTYPE html> <html> <head><title>demo</title></head> <body>                 <h1>This is heading 1</h1>                 <h2>This is heading 2</h2>                 <h3>This is heading 3</h3>                 <h4>This is heading 4</h4>                 <h5>This is heading 5</h5>                  <h6>This is heading 6</h6
Read more