Customising the input text HTML tag

Input "text" is an object to enter a single line of text whose content will be part of form data.

<form name="formname" action="" method="POST">
    <input type="text" name="textname" id="textid" value="" /> 
</form>

You can access the attributes of the object by the id or the chain of names like this:

document.formname.textname

Input password and textarea objects are similar to input text.

Attributes of input text

Most are attributes of input. Readonly and maxlength are specific.

name and id
Name of the object and the identifier.The name has two uses. It is used to access the item, but also becomes a variable name in the form data when it is sent through POST or GET.
So if the name is "mytext" and the content value "content", the form data will contain &content=mytext.
value
Contain the text entered by the user. Can assign a default text. 
<input value="Initial default text" />
This content can be assigned dynamically, to add content to form data, or read dynamically by a script.
Reading example: 
var content = document.formname.textname.value;
size
Original width of the field of text entry. In this case, the size corresponds to a number of characters (for other objects it is a number of pixels).
The width in pixels corresponds to an average font width.
maxlength
Maximum number of characters that the user can enter, or that can be assigned to value.
There may be more chars than the size, in this case the content scrolls in the text field.
disabled
The object is disabled at loading of the page, and displayed in gray. 
<input disabled />
To activate it, a script assigns the attribute with the value false. 
document.formname.textname.disabled = false;
readonly
This attribute prevents to modify the contents of the value attribute.
Unlike disabled the object is displayed normally, although the user can not enter anything.
The state is changed like to the disabled attribute: 
document.formname.textname.readonly = false;

Among the inherited attributes: title, style, tabindex, class.

Events
onfocus
Reacts when the object gets focus, so when the user click on the text field.
onblur
When the focus is lost (the user clicks elsewhere).
onchange
When a character is entered or modified, but is triggered when the text field loses focus.
onselect
Some of the text is selected.
We get also the text selected by the select() method. 
var extract = document.formname.textname.select();
onclick
The user clicks in the text fields.
accesskey
Allows you to assign a key or combination. When the user presses the key, the text field gets focus, he can enter text.
Example:
<input accesskey="t">

To these events are added those of the inherited object: ondblclick, onmousedown, onmouseup, onemousemove, onmouseover, onmouseout, onkeypress, onkeydown.

Input tags for specialized types of data

Password

It is equivalent to the text object with the difference that the text assigned to the value attribute is hidden, and replaced by asterisks.

<input type="password" value="">

Its use and operations are the same.

Textarea

It works like text, but displays several lines. The content is enclosed between a opening a a ending tags.
Attributes:

Example:

<textarea rows="5" cols="40">
  Initial content.
</textarea>

You can use textarea as text to add static data to a form, with the readonly attribute.

How to customize the input text tag

We use event handlers to take account of user actions and CSS to improve the appearance of the graphic object. Example:

User actions

The HTML Code:

<form name="formname" method="post" action="">
<input name="textname" class="textfield" type="text" size="40" maxlength="60" 
  value="Enter a text" 
  onChange="change(this)" 
  onFocus="getfocus(this)" 
  onBlur="losefocus(this)" >
<input type="button" value="Clear" onClick="cleartext()">
</form>

The CSS code: 

.textfield
{
  font-family:"Segoe Print", Verdan, Arial;
  -moz-border-radius:4px;
  border:1px solid gray;
  border-radius:4px;
  background-image:url(images/paper.jpg);
  padding-left:8px;
}

The JavaScript code: 

function cleartext()
{
  document.formname.nomtexte.value="";
}
function change(element)
{
  var storage = document.getElementById("storage");
  storage.innerHTML += element.name + " change<br>";
}
function getfocus(element)
{
  var storage = document.getElementById("storage");
  storage.innerHTML += element.name + " on focus<br>";
}
function losefocus(element)
{
  var storage = document.getElementById("storage");
  storage.innerHTML += element.name + " loses focus<br>";
}

See also

© 2010-2012 Xul.fr