Students Empire
Learn Something New
Home
About Us Contact Donate

text input


If you set the type attribute to text for input element, the browser will display a single-line text box.


  • dirname - Controls text directionality
  • list - Specifies the id of a datalist element that provides values for this element
  • maxlength - Specifies the maximum number of characters that the user can enter into the text box
  • pattern - Specifies a regular expression pattern for the purposes of input validation
  • placeholder - Specifies a hint to the user as to the kind of input that you expect
  • readonly - If present, this attribute makes the text box read-only
  • required - Specifies that the user must enter a value for the purposes of input validation
  • size - Specifies the width of the element in the number of characters that are visible in the text box
  • value - Specifies the initial value for the text box

text input size and maxlength


There are two attributes that have an effect on the size of the text box


The maxlength attribute specifies maximum characters that the user can enter, and the size attribute specifies how many characters the text box can display


For both attributes, the number of characters is expressed as a positive integer value


		        <!DOCTYPE HTML>
		    <html>
		    <body>
		    <form method="post" action="">
		    <p>
		    <label for="name"> Name:
		    <input maxlength="10" id="name" name="name">
		    </label>
		    </p>
		    <p>
		    <label for="city"> City:
		    <input size="10" id="city" name="city">
		    </label>
		    </p>
		    <p>
		    <label for="fave"> Fruit:
		    <input size="10" maxlength="10" id="fave" name="fave">
		    </label>
		    <button type="submit">Submit</button>
		    </p>
		    </form>
		    </body>
		    </html>

The size attribute doesn't apply any restriction on the number of characters that the user can enter.


The third input element has both size settings and the effect is : fixing the size onscreen and limiting the number of characters that the user can enter.


text input placeholder and value


You can use the value attribute to specify a default value and the placeholder attribute to give the user a helpful hint.


		        <!DOCTYPE HTML>
		    <html>
		    <body>
		    <form method="post" action="">
		    <p>
		    <label for="name"> Name:
		    input placeholder="Your name" id="name" name="name">
		    </label>
		    </p>
		    <p>
		    <label for="city"> City:
		    <input placeholder="Where you live" id="city" name="city">
		    </label>
		    </p>
		    <p>
		    <label for="fave"> Fruit:
		    <input value="Apple" id="fave" name="fave">
		    </label>
		    </p>
		    <button type="submit">Submit</button>
		    </form>
		    </body>
		    </html>

When you use the button element to reset the form, the browser restores the placeholders and the default values.


text input Data List


The list attribute allows you to specify the id value of a datalist element, which will be used to suggest users for possible value.


For the text type, the values are presented as autocomplete suggestions. You specify the values you want to give to the user through the option element.


datalist can have option element.


option element can have local attributes: disabled, selected, label, value .


		        <!DOCTYPE HTML>
		    <html>
		    <body>
		    <form method="post" action="">
		    <p>
		    <label for="name"> Name: <input placeholder="Your name" id="name" name="name">
		    </label>
		    </p>
		    <p>
		    <label for="city"> City: <input placeholder="Where you live" id="city" name="city">
		    </label>
		    </p>
		    <p>
		    <label for="fave"> Fruit: <input list="fruitlist" id="fave" name="fave">
		    </label>
		    </p>
		    <button type="submit">Submit</button>
		    </form>
		    <datalist id="fruitlist">
		    <option value="A" label="First">
		    <option value="B">Second</option>
		    <option value="C">
		    </datalist>
		    </body>
		    </html>


Each option element contained inside of the datalist represents a value that you want to propose to the user.


The value attribute specifies the data value that will be used in the input element if that option is selected.


You can use a different label to describe the option by using the label attribute or by defining content within the option element.


text input readonly and disable


The readonly and disabled attributes allow you to create text boxes that the user cannot edit. Each creates a different visual effect.


		        <!DOCTYPE HTML>
		    <html>
		    <body>
		    <form method="post" action="">
		    <p>
		    <label for="name"> Name: <input value="XML" disabled id="name" name="name">
		    </label>
		    </p>
		    <p>
		    <label for="city"> City: <input value="Boston" readonly id="city" name="city">
		    </label>
		    </p>
		    <p>
		    <label for="fave"> Fruit: <input id="fave" name="fave">
		    </label>
		    </p>
		    <button type="submit">Submit</button>
		    </form>
		    </body>
		    </html>

The data from the input element, with the disabled attribute, is not submitted to the server.


input autofocus


You can select which input element the browser focuses on when the form is displayed.


		        <!DOCTYPE HTML>
		    <html>
		    <body>
		    <form method="post" action="">
		    <p>
		    <label for="fave">Fruit: <input autofocus id="fave" name="fave"></label>
		    </p>
		    <p>
		    <label for="name">Name: <input id="name" name="name"></label>
		    </p>
		    <button>Submit</button>
		    </form>
		    </body>
		    </html>

You can apply the autofocus attribute only to one input element. If you try to apply the element more than once, the last one gets the focus.


Set Tabbing Order using the tabindex Attribute


		        <html>
		    <head>
		    <title>Tabbing Order using the tabindex Attribute</title>
		    </head>
		    <body>
		    <form action="" method="get" name="frmTabExample">
		    <input type="checkbox" name="chkNumber" value="1" tabindex="3"> One<br>
		    <input type="checkbox" name="chkNumber" value="2" tabindex="7"> Two<br>
		    <input type="checkbox" name="chkNumber" value="3" tabindex="4"> Three<br>
		    <input type="checkbox" name="chkNumber" value="4" tabindex="1"> Four<br>
		    <input type="checkbox" name="chkNumber" value="5" tabindex="9"> Five<br>
		    <input type="checkbox" name="chkNumber" value="6" tabindex="6"> Six<br>
		    <input type="checkbox" name="chkNumber" value="7" tabindex="10"> Seven<br>
		    <input type="checkbox" name="chkNumber" value="8" tabindex="2"> Eight<br>
		    <input type="checkbox" name="chkNumber" value="9" tabindex="8"> Nine<br>
		    <input type="checkbox" name="chkNumber" value="10" tabindex="5"> Ten<br>
		    <input type="submit" value="Submit">
		    </form>
		    </body>
		    </html>