HTML supports the following input elements:
input element of type type="button"
is equivalent to a button element
Each input type is similar to a input widget found in
a GUI toolkit. HTML input elements are a lot easier.
The name and value
attributes identify the input element and its value,
in a form that are sent to the server script.
The textarea element creates an editable
region on the web page. The size is specified by
the rows and cols attributes.
The wrap attributes specifies how line
breaks and wrapping are handled. The values
for wrap are off, hard,
and soft.
An example of using textarea is:
<html>
<head>
<title>Form Element</title>
</head>
<script type="text/javascript">
function copyarea() {
var src = document.getElementById('tsrc');
var dst = document.getElementById('tdst');
dst.value = src.value
}
</script>
<body>
<textarea rows="10" cols="20" id="tsrc" onchange="copyarea();">
Edit me.
</textarea>
<textarea rows="10" cols="20" readonly id="tdst" >
</textarea>
</body>
</html>
Most input elements support the disabled
and readonly attributes.
Is a textarea element a block or inline element? Why?
A button element will surround content
that becomes a push buttons label.
The type attribute specifies
the type as a button, submit,
or reset button.
The default is button.
<html>
<head>
<title>Button Element</title>
<script type="text/javascript">
function doit(evt) { alert( evt ) }
function init() {
var b = document.getElementById("cir")
b.addEventListener('click', doit, false )
}
</script>
</head>
<body onload="init()">
<button onclick="alert(this)">
<h1>Hello World</h1>
</button>
<button onclick="alert('two')">
<p>
Even more text<br> on two lines, <br>
no three lines
</p>
</button>
<button id="cir" >
<img alt="push" src="../../images/circles.png">
</button>
</body>
</html>
An input element is layed out as if it is an image (i.e., an inline replaced element).
A single line text input field is provided
by a input element with
the type attribute set to text.
The size attribute sets the number
of input columns.
A password input is like an text
input, except the text is echoed as '*'.
<html>
<head>
<title>text and password field</title>
</head>
<body>
<ul>
<li>
name
<input type="text" name="first"
size="15" onchange='alert(this.value)'>
</li>
<li>
<label >surname:
<input type="text" id="sur" name="sur"
size="20" onchange='alert(this.value)'>
</label>
</li>
<li>
<label for="pw">password:</label>
<input type="password" id="pw" name="pw"
size="8" onchange='alert(this.value)'>
</li>
</ul>
</body>
</html>
The onchange event only occurs when the
focus is shifted from the text field (i.e,. a blur
event has happend) or a new line is entered
and the contents are different.
A label element that contains
an input element is associated with
that input. Clicking on the label will change focus to the
input element.
The for attribute is also used to associate
the label with an input element.
A checkbox can be toggled on or off.
A radio button can also be toggled on or off.
If a set of radio buttons share the same
control name, then the last radio button pressed
will be on, and all others will be off.
The checked attribute is used
to set the checked state to true.
<html>
<head>
<title>check box and radio button</title>
</head>
<body>
<table>
<tr>
<td> one
<input type="radio" name="station" checked tabindex="1"
value="123" onchange="alert(this.value)">
</td>
<td> two
<input type="radio" name="station" tabindex="3"
value="47" onclick="alert('click')"
onchange="alert(this.value)">
</td>
<td> three
<input type="radio" name="station" tabindex="2"
value="987" onchange="alert(this.value)">
</td>
</tr>
<tr>
<td colspan=2>
<label for="s1">student</label>
<input id="s1" type="radio" name="role" checked tabindex="5"
value="student" onchange="alert(this.value)">
</td>
<td> staff
<input type="radio" name="role" tabindex="4"
value="staff" onclick="alert('click')"
onchange="alert(this.value)">
</td>
</tr>
<tr>
<td> red
<input type="checkbox" name="colour" checked
value="red" onchange="alert(this.checked)">
</td>
<td> green
<input type="checkbox" name="colour"
value="green" onchange="alert(this.value)">
</td>
<td> blue
<input type="checkbox" name="colour" checked
value="blue" onchange="alert(this.value)">
</td>
</tr>
</body>
</html>
The file input allows the user
to select a file name by browsing their
directories.
Extra care is taken to prevent security problems
(i.e., the value field cannot be set from Javascript).
<html>
<head>
<title>select a file name</title>
</head>
<body>
<h1>
<label>file:
<input type="file" name="fff" value="foo"
size="12" onchange='alert(this.value)'>
</label>
</h1>
</body>
</html>
Menu items and selection from fixed set of items
can be provide by the select
and option elements.
The size attributes restricts
the number of items to be displayed.
The multiple attribute enables
selection of multiple items.
<html>
<head>
<title>select input</title>
</head>
<body>
<p>
Please choose your favorite colour:
<select name="colour1" onchange="alert(this.value)">
<option>red</option>
<option>green</option>
<option value="BLUE">blue</option>
<option>cyan</option>
<option>magenta</option>
<option>yellow</option>
</select>
</p>
<p>
Please choose your favorite colour:
<select size="4" name="colour2" onchange="alert(this.value)">
<option>red</option>
<option>green</option>
<option>blue</option>
<option>cyan</option>
<option>magenta</option>
<option>yellow</option>
</select>
</p>
<p>
Please choose your favorite colour:
<select multiple size="5" name="colour3"
onchange="alert(this.value)">
<option>red</option>
<option>green</option>
<option selected>blue</option>
<option>cyan</option>
<option>magenta</option>
<option>yellow</option>
</select>
</p>
</body>
</html>
Again, the input element is layed out like an image.
The option elements can also
be grouped by an optgroup element.
The optgroup element allows a group
of options to be labelled.
<html>
<head>
<title>option group labels</title>
</head>
<body>
<p>
Please choose your favorite colour:
<select name="colour1" onchange="alert(this.value)">
<optgroup label="colours">
<option>red</option>
<option>green</option>
<option>blue</option>
<option>cyan</option>
<option>magenta</option>
<option>yellow</option>
</optgroup>
<optgroup label="grey scale">
<option>black</option>
<option>grey</option>
<option>white</option>
</optgroup>
</select>
</p>
</body>
</html>
The tabindex attribute can be used
to define the order that input (actual, all) elements will
receive focus.
An element with focus will receive keyboard events.
Input elements that are accessed in a prescribed
order can use the tabindex to set
the order. For example:
<html>
<head>
<title>TabIndex Element</title>
</head>
<body>
<a tabindex=1 href="#theend">goto the end</a>
<table width="80%" border=1 cellpadding=4>
<tr>
<td width="50%">
<button tabindex="2" onclick="alert(1)">ONE</button>
</td>
<td>
<button tabindex="3" onclick="alert(2)">TWO</button>
</td>
</tr>
<tr>
<td>
<input tabindex="4" type="radio" name="yesno"
value="yes" onchange="alert(3)">
</td>
<td>
<input tabindex="5" type="radio" name="yesno"
value="no" onchange="alert(4)">
</td>
</tr>
<tr>
<td>
<input tabindex="6" type="checkbox" name="ok"
value="yes" onchange="alert(5)">
</td>
<td>
<input tabindex="7" type="checkbox" name="ok"
value="no" onchange="alert(6)">
</td>
</tr>
<tr>
<td>
<input tabindex="8" type="text" name="foo">
</td>
<td>
<input tabindex="9" type="button" name="hitme" value="me">
</td>
</tr>
</table>
<a name="theend"><h3>the end</h3></a>
</body>
</html>
The space bar will act like a click when focus is on a button, radio, checkbox, or button input.
HTML also defines the following input types
that require an enclosing form element.
action
attributed in the form element is
performed. This usually results in sending
a request to server with the form data.
hidden
is not displayed by the browser. It is used
to provide extra information when a form is
submitted. The name and
value attributes give the
name and value of this information.
Information required by a remote web site can be
provide by a form element with
the enclosing input elements.
The form element provided the only
way to exchange data with remote site before
the script element was available.
This element defines the attributes:
get or a post.
id element can also be used.
An example of a form with a javascript URL as the action is:
<html>
<head>
<title>Form Element</title>
<script type="text/javascript">
function handleform( id ) {
var form = document.getElementById( id )
var msg = "Number: " + form.stno.value + "\n"
msg += "Name: " + form.stna.value + "\n"
msg += "Userid: " + form.userid.value + "\n"
alert( msg );
}
</script>
</head>
<body>
<p>
Please fill out the form:
</p>
<p>
<form id="f1" action="javascript: void handleform('f1')">
<label>Num:
<input type="text" name="stno" value="123">
</label>
<br>
<label>Name:
<input type="text" name="stna" value="name">
</label>
<br>
<label>Age:
<input type="text" name="stage" disabled value="99">
</label>
<br>
<label>Registered:
<input type="text" name="streg" readonly value="yes">
</label>
<br>
<input type="submit"> <input type="reset">
<input type="hidden" name="userid" value="me">
</form>
</p>
<p>
Thank you
</p>
</body>
</html>
Calculators are a good example for using input elements for client-side processing.
<html>
<head>
<title>Metric Conversion</title>
<script type="text/javascript" defer >
function ftoc() {
var f = document.getElementById( "fahrenheit" )
var c = document.getElementById( "celsius" )
var vf = parseFloat( f.value )
c.value = (vf - 32.0)/1.8
}
function ctof() {
var f = document.getElementById( "fahrenheit" )
var c = document.getElementById( "celsius" )
var cf = parseFloat( c.value )
f.value = cf*1.8 + 32.0
}
</script>
</head>
<body>
<button onclick="ftoc()">F to C</button>
<button onclick="ctof()">C to F </button>
<br>
<label> Fahrenheit:
<input type="text" size="8" value="32" id="fahrenheit">
</label>
<br>
<label> Celsius:
<input type="text" size="8" value="0" id="celsius">
</label>
</body>
</html>