LATEST >>

Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » HTML Codes / HTML-CSS-PHP-JavaScript » Input: A Best Tag For One Line Text Adding On WebPage.

Input: A Best Tag For One Line Text Adding On WebPage.

Input-A-Best-Tag-For-One-Line-Text-Adding-On-WebPage
The HTML <input/> element is used to create interactive controls for web-based forms in order to accept data from the user. How an <input/> works varies considerably depending on the value of its type attribute. Text fields are used to gather short text responses from a user. Text fields can also be used to gather numerical data.

Text fields are created using the <input/> tag. When used to create text fields, the INPUT tag has two required attributes, TYPE and NAME, and four optional attributes, ID, VALUE, SIZE, and MAXLENGTH.

General Attributes For HTML INPUT Text Tag:

Here are some generat HTML attributes for TEXT INPUT Tag that are used commonly. There are more that are shared below too.

The TYPE Attribute (required):

There are three values of the TYPE attribute which are used to create text fields.
type="text" INPUT tags with type=”text” are used to create an empty box, one line high to gather data typed by the user.
type="password" INPUT tags with type=”password” also create an empty box, but when the user types information in that box, the characters are replaced by a masking character.
Note: Using a password field on a web page does not provide a secure method of transferring sensitive information. You must use a secure transaction method to be sure that sensitive data are not compromised.
type="hidden" INPUT tags with type=”hidden” do not appear on the screen of the form, but are useful when the CGI script being used requires information from the form. For instance, if you use the same script to process three different HTML order forms, using a hidden field to identify which form was submitted is useful.

Recommended For You:
Pure Vanilla JavaScript HEX Code Color Wheel Picker

The NAME Attribute (required):

The author of the form assigns a value to the NAME attribute. Choose names for your form fields which are meaningful. If you have a field that asks for the user’s name, it is best to use name=”name”. Using name="field3" is not very useful for most uses of an HTML form.

The ID/Class Attribute (optional):

The ID/Class attribute is used to explicitly associate the specific Input tag with a specific LABEL tag. ID attributes are unique within a page but Class can be same for many attributes like id="textID" class="textClass".

The VALUE Attribute (optional):

The VALUE attribute is used to include default text in a text field. All but the first example at the bottom of the page includes the VALUE attribute. The VALUE attribute is required when using hidden fields.

The SIZE Attribute (optional):

The SIZE attribute defines the length of the text box in characters like size="30".

The MAXLENGTH Attribute (optional):

The MAXLENGTH attribute defines the maximum length in characters of the text the user can type. The number used for MAXLENGTH may be larger than, smaller than, or equal to the number used for the SIZE attribute like maxlength="50".

All Attributes To HTML Text Input Tab:

<input
	type=""
	name=""
	value=""
	size=""
	maxlength=""
	checked=""
	src=""
	class=""
	id=""
	dir=""
	lang=""
	title=""
	style=""
	align=""
	alt=""
	readonly=""
	disabled=""
	tabindex=""
	accesskey=""
	ismap=""
	usemap=""
	onfocus=""
	onblur=""
	onselect=""
	onchange=""
	onclick=""
	ondbclick=""
	onmousedown=""
	onmouseup=""
	onmouseover=""
	onmousemove=""
	onmouseout=""
	onkeypress=""
	onkeydown=""
	onkeyup="" />

Some Awesome HTML INPUT TEXT Tag Snippets:

<input type="text" placeholder="LIGHT TEXT" />

<input type="text" value="TEXT AUTO VISIBLE" />

<style>.email:focus{color:#ff0000}</style>
<input class="email" type="text" value="CLICK TO CHANGE THE TEXT COLOR" />

<onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" type="text" value="YOUR SHOWED TEXT" />

Last Words:

That’s all we have. If you have any problem with this code in your codings then feel free to contact us with full explanation of your problem. We will reply you as time allow to us. Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy blogging, See you in next article…

Recommended For You:
How To Declare and Initialize PHP Objects Without Class?

You Like It, Please Share This Recipe With Your Friends Using...

Be the first to write a comment.

Leave a Reply

Your email address will not be published. Required fields are marked *