The <form> element can contain one or more of the following form elements: <input> <textarea> <button> <select> <option> <optgroup> <fieldset> <label> The <input> element has several types button checkbox date email file image number password radio search submit tel text time
<form> First name:<br> <input type="text" name="firstname"><br> <input type="radio" name="gender" value="male" checked> Male<br> <input type="radio" name="gender" value="female"> Female<br> <input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br> <input type="checkbox" name="vehicle2" value="Car"> I have a car Select a file: <input type="file" name="myFile"> </form> <input type="button" onclick="alert('Hello World!')" value="Click Me!">
The sample image on the right shows most of these elements: a text box asking for your name a pair of radio buttons asking you to pick your sex a select box giving you a list of eye colors to choose from a pair of check boxes to click on if they apply to you a text area to describe your athletic ability a submit button to send it to the server
<HTML> <title>Date personale Form</title> <HEAD> <SCRIPT LANGUAGE= "JavaScript"> function valForm() { var outstr; var craciunloc = -1; var numarcluburi = 0; var cluburi = new Array(); // create an empty array var sel = document.persoanaForm.oras.selectedIndex; var fav = document.persoanaForm.oras.options[sel].text; for (i = 0 ; i < document.persoanaForm.craciun.length ; i++) if (document.persoanaForm.craciun[i].checked) { craciunloc = i; craciunOcupatie = document.persoanaForm.craciun[i].value;} for (i = 0 ; i < document.persoanaForm.club.length ; i++) if (document.persoanaForm.club.options[i].selected) { cluburi[numarcluburi] = document.persoanaForm.club.options[i].text; numarcluburi++;} var numcheck = 0; for (i = 0 ; i < document.persoanaForm.sport.length-1 ; i++) if (document.persoanaForm.sport[i].checked) numcheck++; return true; } </SCRIPT> </HEAD> Versiune prescurtata 2 slideuri
<BODY> <h2>Form 1: Select, Checkbox, Radio Button</h2> <FORM NAME = "persoanaForm" onSubmit = "return valForm();"> <h3>Alege orasul preferat:</h3> <select NAME=oras> <option value=cluj>Cluj-Napoca </select> <h3>Ce faci de Craciun?</h3> <p> <input type=radio name=craciun value="mergi la un club">mergi la un club </p> <h3>Care sport iti place? (Bifeaza tot ce-ti place)</h3> <input type=checkbox name=sport value=schi>schi <h3>Care sunt cluburile preferate? (Selecteaza tot ce-ti place)</h3> <select NAME=club multiple size=4> <option value=rev>Revolution <input type=submit> </FORM> </BODY>
<HTML> <title>Date personale Form</title> <HEAD> <SCRIPT LANGUAGE= "JavaScript"> <!-- function valForm() { var outstr; var craciunloc = -1; var numarcluburi = 0; var cluburi = new Array(); // create an empty array var sel = document.persoanaForm.oras.selectedIndex; var fav = document.persoanaForm.oras.options[sel].text; for (i = 0 ; i < document.persoanaForm.craciun.length ; i++) if (document.persoanaForm.craciun[i].checked) { craciunloc = i; craciunOcupatie = document.persoanaForm.craciun[i].value; } for (i = 0 ; i < document.persoanaForm.club.length ; i++) if (document.persoanaForm.club.options[i].selected) { cluburi[numarcluburi] = document.persoanaForm.club.options[i].text; numarcluburi++;
var numcheck = 0; for (i = 0 ; i < document.persoanaForm.sport.length-1 ; i++) if (document.persoanaForm.sport[i].checked) numcheck++; if (craciunloc != -1) outstr = 'Orasul tau preferat este ' + fav + ' si \n de Craciun ' + craciunOcupatie + '!'; else outstr = 'Orasul tau preferat este' + fav + ' si \n de Craciun nu stii ce faci'; if (numarcluburi > 0) outstr = outstr + '\n Cluburile favorite sunt:'; for (i = 0 ; i < numarcluburi ; i++) outstr = outstr + '\n ' + cluburi[i]; if (document.persoanaForm.sport[3].checked) alert(outstr + '\n Nu le ai cu sportul!'); if (numcheck <=2) alert(outstr + '\n Iti place sportul'); alert(outstr + '\n si esti un mare fan al lui!'); return true; } // end hiding --> </SCRIPT> </HEAD>
<BODY> <h2>Form 1: Select, Checkbox, Radio Button</h2> <FORM NAME = "persoanaForm" onSubmit = "return valForm();"> <h3>Alege orasul preferat:</h3> <select NAME=oras> <option value=cluj>Cluj-Napoca <option value=buc>Bucuresti <option value=tim>Timisoara <option value=bra>Brasov <option value=con>Constanta <option value=iasi>Iasi </select> <h3>Ce faci de Craciun?</h3> <p> <input type=radio name=craciun value="stai acasa">stai acasa <br> <input type=radio name=craciun value="colinzi la prieteni">colinzi la prieteni <input type=radio name=craciun value="mergi la un club">mergi la un club </p>
<h3>Care sport iti place? (Bifeaza tot ce-ti place)</h3> <input type=checkbox name=sport value=schi>schi <br> <input type=checkbox name=sport value=fotbal>fotbal <input type=checkbox name=sport value=baschet>sah <input type=checkbox name=sport value=video>jocuri video sport </p> <h3>Care sunt cluburile preferate? (Selecteaza tot ce-ti place)</h3> <select NAME=club multiple size=4> <option value=rev>Revolution <option value=phi>PHI 18 <option value=eu>Euphoria <option value=car>Caro </select> <input type=submit> </FORM> </BODY>
<html> <head> <title>Calculator</title> <script language=JavaScript> <!-- hide from incompatible browsers var instring=''; function updateIn(val) { instring += val; document.calculator.input.value = instring; } // done hiding --> </script> </head>
<body> <center> <font face="Verdana, Arial, Sans-Serif"> <h2>Calculator</h2> </font> <br> <form name=calculator> <table border=0 cellpadding=2 cellspacing=0> <tr> <td colspan=4><input type=text name=input size=20 maxlength=30></td> </tr> <td><input type=button name=one value=" 1 " onclick="updateIn('1');"></td> <td><input type=button name=two value=" 2 " onclick="updateIn('2');"></td> <td><input type=button name=three value=" 3 " onclick="updateIn('3');"></td> <td><input type=button name=addt value=" + " onclick="updateIn(' + ');"></td>
<tr> <td><input type=button name=four value=" 4 " onclick="updateIn('4');"></td> <td><input type=button name=five value=" 5 " onclick="updateIn('5');"></td> <td><input type=button name=six value=" 6 " onclick="updateIn('6');"></td> <td><input type=button name=sub value=" - " onclick="updateIn(' - ');"></td> </tr> <td><input type=button name=seven value=" 7 " onclick="updateIn('7');"></td> <td><input type=button name=eight value=" 8 " onclick="updateIn('8');"></td> <td><input type=button name=nine value=" 9 " onclick="updateIn('9');"></td> <td><input type=button name=mult value=" * " onclick="updateIn(' * ');"></td>
<tr> <td><input type=button name=zero value=" 0 " onclick="updateIn('0 ');"></td> <td><input type=button name=dec value=" . " onclick="updateIn('.');"></td> <td><input type=button name=calc value=" = " onclick="input.value=instring=eval(instring);"></td> <td><input type=button name=div value=" / " onclick="updateIn(' / ');"></td> </tr> <td></td> <td colspan=2 align=center><input type=button name=clear value=" Clear " onclick="input.value=''; instring='';";"></td> </table> </form> </center> </body>