• Have Any Question?
  • contact@eitworld.com

HTML Text Input Controls





There are three type of Text Controls:

◆ Single-line Text field

◆ Password field

◆ Multi-line Text field

Single-line Text field

 

    • This text filed basically used for the purpose of entering single line text.
    • <input type=”text”> this tag is used for this purpose.

Syntax:

<input type= “text” name= “any name” />

 

  • Here is an example of single-line text field which will take the Username and Email-id by the user:

Example

<!DOCTYPE html>
<html>
<body>
<form >
Username:<input type=”text” name=”user_name” />
<br>
Email-id:<input type=”text” name=”email_id” />
</form>
</body>
</html>

To see live output : Visit Try Yourself Editor

Output

Attributes

    • Here is the list of Attributes for creating single line text field :
Attribute Description
type (Required) It defines which input field to create.for single line text field it will be set to “text”.
name (Optional) It is important as the field will be identified in the other file or server by the value of this attribute.
value (Optional) It defines a predefined value in that field.
disabled (Optional) It specifies that the input field will be disabled. Generally, it is used alone without any value.
size (Optional) It allows to specify the width of the text-input control in terms of characters.
maxlength (Optional) It allows to specify the maximum number of characters a user can enter into the text box.

 

Password field

.

    • It is an input field of single line which will be shown as password.
    • <input type=”password”> this tag is used for this purpose.

Syntax:

<input type= “password” name= “any name” />

 

  • Here is an example of password field which will take the Username and Password by the user:

Example

<!DOCTYPE html>
<html>
<body>
<form >
Username:<input type=”text” name=”user_name” />
<br><br>
Password:<input type=”password” name=”password” />
</form>
</body>
</html>

To see live output : Visit Try Yourself Editor

Output

Attributes

    • Here is the list of Attributes for creating password field:
Attribute Description
type (Required) It defines which input field to create.for single line text field it will be set to “password”.
name (Optional) It is important as the field will be identified in the other file or server by the value of this attribute.
value (Optional) It defines a predefined value in that field.
disabled (Optional) It specifies that the input field will be disabled. Generally, it is used alone without any value.
size (Optional) It allows to specify the width of the text-input control in terms of characters.
maxlength (Optional) It allows to specify the maximum number of characters a user can enter into the text box.

 

Multi-line Text field

 

    • It is not a type of input element. It is an element itself.
    • <textarea> tag is used for this purpose and this is used in pair.
    • It is a rectangle shaped area to let user input multiline text.
    • The text written between the opening and closing tag will be the predefined value of textarea.

Syntax:

<textarea name= “any name”></textarea>

 

  • Here is an example of multiline text field which will comment by the user:

Example

<!DOCTYPE html>
<html>
<body>
<form >
Comment:
<br />
<textarea rows=”5″ cols=”50″ name=”comment”>
Write Comment here…
</textarea>
</form>
</body>
</html>

To see live output : Visit Try Yourself Editor

Output

Attributes

    • Here is the list of Attributes for creating multiline text field:
Attribute Description
name (Optional) It is important as the field will be identified in the other file or server by the value of this attribute.
disabled (Optional) It specifies if the input field will be enabled or disabled. It specifies that the input field will be disabled. It may have any value. Generally, its value is written same as its name.
rows (Optional) It relates to the height of the textarea. It defines how many rows will be there in it.
cols (Optional) It relates to the width of the textarea. It defines how many columns will be there in it.


Real Time Web Analytics