Various form elements

inputs

type example script
reading an input field from within a form


<form>
<input name="yep"><br>
<input type="button" value="go" onclick="alert(yep.value)">
</form>
reading an input field
unsuccessfully
from outside the form

<form> <input name="yep"></form>
<form> <input type="button" value="go" onclick="alert(yep.value)">
</form>
reading an input from
elsewhere in the document,
successfully

<form name="a"> <input name="yep"></form>
<form> <input type="button" value="go" onclick="alert(a.yep.value)">
</form>
using input values outside the document


<script>function f( ){ alert(document.b.y.value)}</script>
<form name="b">
<input name="y">
<input type="button" value="go" onclick="f()"></form>
listening to an input field


 <input name= "a"onkeyup="b.value=a.value">
        <input name="b">

buttons

type example script
letting a button announce its name

<form>
<input onclick="alert(this.name)" type="button" name="Sam I am" value="go" </form>
a button redefines its identity

<form><inputonclick="this.value='now'" type="button" value=" go"></form>
a button changes its value back and forth

function s(){if (on) document.n.n.value="borth"; else document.n.n.value=" fack ";}
----------------------------------
<form name="n"><input name="n" value="borth" type= "button"onclick="on=!on;s()"></form>
two buttons: one blurs; the other doesn't

<form><input type="button" value="one" onclick="blur( );">
<input type="button" value="other"> </form>
  button and input/submit  

widgets

type example script
radio

more

tralala hoopla fluff

<form>
<input type= "radio" name="r" value= "1"onclick="r.value=1;blur();">tralala
<input type= "radio" name="r" value= "2"onclick="r.value=2;blur();">hoopla
<input type= "radio" name="r" value= "3"onclick="r.value=3;blur();">fluff
<input type="button" value="choose then clickhere" onclick= "alert(r.value)">
checkbox

more

horses
cows

 <form>
<input type="checkbox" name="p" value="horses">horses<br>
<input type="checkbox" name="q" value="cows">cows<br>
 <input type= "button"value= "done"onclick= "alert(p.checked+'and'+q.checked);"><BR>      </form>
text area

more


<form> <textarea name="meatloaf" cols=16 rows=4></textarea>
<br>
<input type= "button" value="send" onclick= "alert(meatloaf.value);">< BR>       </form>
text area with
disappearing ink


<form><TEXTAREA cols=16 name=kiss rows= 4onfocus="this.value='';">type here</TEXTAREA><br>
<input type= "button" value="send" onclick= "alert(kiss.value);"></form>
selection list
IE only


<form><select name="s">
 <option value="1">first</option>
 <option value="2">second</option>
 <option value="3">third</option>
</select>
 <input type="button" value="ready" onclick= alert(s.value)></form>
self-activating selection,
done for both browsers

more

<script>
 function findselect(){
  for (i=0;i<document.qq.u.options.length;i++){
  if(document.qq.u.options[i].selected) alert(i);
 }}
 </script>
<form name="qq">
 <select name="u" onchange="findselect()" size="1">
<option value="1">first</option>
<option value="2">second</option>
<option value="3">third</option>
</select>
fileupload


<input type=file name="y" onChange="z.src='file:///'+y.value;"><br><input type=button value="personalize" onclick="z.src=y.value;">