Esimerkkejä JavaScriptin käyttämisestä HTML:n käyttämiseen ja käsittelemiseen syöttöobjekteja.
Poista painike käytöstä
<!DOCTYPE html>
<html>
<body>
<form>
<input type="button" id="btn01" value="OK">
</form>
<p>Click the "Disable" button to disable the "OK" button:</p>
<button onclick="disableElement()">Disable</button>
<script>
function disableElement() {
document.getElementById("btn01").disabled = true;
}
</script>
</body>
</html>
Etsi painikkeen nimi
<!DOCTYPE html>
<html>
<body>
<form id="frm1" action="/action_page.php">
<button id="btn1" name="subject" type="submit" value="HTML">HTML</button>
</form>
<p>Click the "Try it" button to display the name of the "HTML" button:</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("btn1").name;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
Etsi painikkeen tyyppi
<!DOCTYPE html>
<html>
<body>
<button id="btn1" type="button">HTML</button>
<p>Click the "Try it" button to return the type of the "HTML" button:</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("btn1").type;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
Etsi painikkeen arvo
<!DOCTYPE html>
<html>
<body>
<form id="frm1" action="/action_page.php">
<button id="btn1" name="subject" type="submit" value="fav_HTML">HTML</button>
<button id="btn2" name="subject" type="submit" value="fav_CSS">CSS</button>
</form>
<p>Click the "Try it" button to return the value of the "HTML" button:</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("btn1").value;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
Etsi painikkeessa näkyvä teksti
<!DOCTYPE html>
<html>
<body>
<form id="frm1" action="/action_page.php">
<button id="btn1" name="subject" type="submit" value="fav_HTML">HTML</button>
<button id="btn2" name="subject" type="submit" value="fav_CSS">CSS</button>
</form>
<p>Click the "Try it" button to return the text on the "HTML" button:</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("btn1").innerHTML;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
Etsi lomakkeen tunnus, johon painike kuuluu
<!DOCTYPE html>
<html>
<body>
<form id="form1">
<button id="btn1" type="button">HTML</button>
</form>
<p>Click the "Try it" button to display the id of the form the HTML button belongs to:</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("btn1").form.id;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
Lähetä lomake
<!DOCTYPE html>
<html>
<body>
<p>Enter names in the fields, then click "Submit" to submit the form:</p>
<form id="frm1" action="/action_page.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br><br>
<input type="button" onclick="myFunction()" value="Submit">
</form>
<script>
function myFunction() {
document.getElementById("frm1").submit();
}
</script>
</body>
</html>
Nollaa lomake
<!DOCTYPE html>
<html>
<body>
<p>Enter names in the fields below, then click "Reset" to reset the form.</p>
<form id="frm1">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br><br>
<input type="button" onclick="myFunction()" value="Reset">
</form>
<script>
function myFunction() {
document.getElementById("frm1").reset();
}
</script>
</body>
</html>
Etsi lomakkeen jokaisen elementin arvo
<!DOCTYPE html>
<html>
<body>
<form id="frm1" action="/action_page.php">
First name: <input type="text" name="fname" value="Donald"><br>
Last name: <input type="text" name="lname" value="Duck"><br><br>
<input type="submit" value="Submit">
</form>
<p>Click "Try it" to display the value of each element in the form.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("frm1");
var text = "";
var i;
for (i = 0; i < x.length ;i++) {
text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
Etsi lomakkeen hyväksytty merkistö
<!DOCTYPE html>
<html>
<body>
<form id="frm1" accept-charset="ISO-8859-1">
First name: <input type="text" name="fname" value="Donald"><br>
Last name: <input type="text" name="lname" value="Duck"><br>
</form>
<p>Click "Try it" to display accept-charset of the form:</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("frm1").acceptCharset;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
Etsi lomakkeen toiminta-attribuutti
<!DOCTYPE html>
<html>
<body>
<form id="frm1" action="/action_page.php">
First name: <input type="text" name="fname" value="Donald"><br>
Last name: <input type="text" name="lname" value="Duck"><br><br>
<input type="submit" value="Submit">
</form>
<p>Click "Try it" to display the value of the form's action attribute:</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("frm1").action;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
Etsi lomakkeesta enctype-attribuutin arvo
<!DOCTYPE html>
<html>
<body>
<form id="frm1" action="/action_page.php" method="post">
First name: <input type="text" name="fname" value="Donald"><br>
Last name: <input type="text" name="lname" value="Duck"><br><br>
<input type="submit" value="Submit">
</form>
<p>Click "Try it" to display the value of the enctype attribute of the form:</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("frm1").enctype;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
Etsi lomakkeen elementtien lukumäärä
<!DOCTYPE html>
<html>
<body>
<form id="frm1" action="/action_page.php">
First name: <input type="text" name="fname" value="Donald"><br>
Last name: <input type="text" name="lname" value="Duck"><br><br>
<input type="submit" value="Submit">
</form>
<p>Click "Try it" to display the number of elements the form:</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("frm1").length;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
Etsi lomaketietojen lähetystapa
<!DOCTYPE html>
<html>
<body>
<form id="frm1" action="/action_page.php" method="get">
First name: <input type="text" name="fname" value="Donald"><br>
Last name: <input type="text" name="lname" value="Duck"><br><br>
<input type="submit" value="Submit">
</form>
<p>Click "Try it" to display the value of the form method.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("frm1").method;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
Etsi lomakkeen nimi
<!DOCTYPE html>
<html>
<body>
<form id="frm1" name="form1" action="/action_page.php">
First name: <input type="text" name="fname" value="Donald"><br>
Last name: <input type="text" name="lname" value="Duck"><br><br>
<input type="submit" value="Submit">
</form>
<p>Click "Try it" to display the name of the form:</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("frm1").name;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
Etsi lomakkeen kohde
<!DOCTYPE html>
<html>
<body>
<form id="frm1" action="/action_page.php" target="_self">
First name: <input type="text" name="fname" value="Donald"><br>
Last name: <input type="text" name="lname" value="Duck"><br><br>
<input type="submit" value="Submit">
</form>
<p>Click "Try it" to display the target of the form:</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("frm1").target;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
Poista käytöstä ja ota käyttöön avattava luettelo
<!DOCTYPE html>
<html>
<head>
<script>
function disable() {
document.getElementById("mySelect").disabled=true;
}
function enable() {
document.getElementById("mySelect").disabled=false;
}
</script>
</head>
<body>
<form>
<select id="mySelect">
<option>Apple</option>
<option>Pear</option>
<option>Banana</option>
<option>Orange</option>
</select>
<br><br>
<input type="button" onclick="disable()" value="Disable list">
<input type="button" onclick="enable()" value="Enable list">
</form>
</body>
</html>
Hanki sen lomakkeen tunnus, joka sisältää avattavan luettelon
<!DOCTYPE html>
<html>
<body>
<form id="myForm">
<select id="mySelect">
<option>Apple</option>
<option>Pear</option>
<option>Banana</option>
<option>Orange</option>
</select>
</form>
<p>The id of the form is:<p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = document.getElementById("mySelect").form.id;
</script>
</body>
</html>
Katso vaihtoehtojen määrä avattavasta luettelosta
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form>
<select id="mySelect">
<option>Apple</option>
<option>Pear</option>
<option>Banana</option>
<option>Orange</option>
</select>
</form>
<p>There are <span id="demo">0</span> options in the list.</p>
<script>
document.getElementById("demo").innerHTML =
document.getElementById("mySelect").length;
</script>
</body>
</html>
Muuta avattava luettelo moniriviseksi luetteloksi
<!DOCTYPE html>
<html>
<head>
<script>
function changeSize() {
document.getElementById("mySelect").size = 4;
}
</script>
</head>
<body>
<form>
<select id="mySelect">
<option>Apple</option>
<option>Banana</option>
<option>Orange</option>
<option>Melon</option>
</select>
<input type="button" onclick="changeSize()" value="Change size">
</form>
</body>
</html>
Valitse useita vaihtoehtoja avattavasta luettelosta
<!DOCTYPE html>
<html>
<head>
<script>
function selectMultiple() {
document.getElementById("mySelect").multiple = true;
}
</script>
</head>
<body>
<form>
<select id="mySelect" size="4">
<option>Apple</option>
<option>Pear</option>
<option>Banana</option>
<option>Orange</option>
</select>
<input type="button" onclick="selectMultiple()" value="Select multiple">
</form>
<p>Before you click "Select multiple", you cannot select more than one option (by holding down the Shift or Ctrl key).</p>
<p>After you have clicked "Select multiple", you can.</p>
</body>
</html>
Näytä valittu vaihtoehto avattavassa luettelossa
<!DOCTYPE html>
<html>
<head>
<script>
function getOption() {
var obj = document.getElementById("mySelect");
document.getElementById("demo").innerHTML =
obj.options[obj.selectedIndex].text;
}
</script>
</head>
<body>
<form>
Select your favorite fruit:
<select id="mySelect">
<option>Apple</option>
<option>Orange</option>
<option>Pineapple</option>
<option>Banana</option>
</select>
<br><br>
<input type="button" onclick="getOption()" value="Click Me!">
</form>
<p id="demo"></p>
</body>
</html>
Näytä kaikki vaihtoehdot avattavasta luettelosta
<!DOCTYPE html>
<html>
<head>
<script>
function getOptions() {
var x = document.getElementById("mySelect");
var txt = "";
var i;
for (i = 0; i < x.length; i++) {
txt = txt + " " + x.options[i].text;
}
document.getElementById("demo").innerHTML = txt;
}
</script>
</head>
<body>
<form>
Select your favorite fruit:
<select id="mySelect">
<option>Apple</option>
<option>Orange</option>
<option>Pineapple</option>
<option>Banana</option>
</select>
<br><br>
<input type="button" onclick="getOptions()" value="Output all options">
</form>
<p id="demo"></p>
</body>
</html>
Näytä valitun vaihtoehdon hakemisto avattavassa luettelossa
<!DOCTYPE html>
<html>
<head>
<script>
function getIndex() {
document.getElementById("demo").innerHTML =
document.getElementById("mySelect").selectedIndex;
}
</script>
</head>
<body>
<form>
Select your favorite fruit:
<select id="mySelect">
<option>Apple</option>
<option>Orange</option>
<option>Pineapple</option>
<option>Banana</option>
</select>
<br><br>
<input type="button" onclick="getIndex()"
value="Display the index of the selected option">
</form>
<p id="demo"></p>
</body>
</html>
Muuta valitun vaihtoehdon tekstiä
<!DOCTYPE html>
<html>
<head>
<script>
function changeText() {
x = document.getElementById("mySelect");
x.options[x.selectedIndex].text = "Melon";
}
</script>
</head>
<body>
<form>
Select your favorite fruit:
<select id="mySelect">
<option>Apple</option>
<option>Orange</option>
<option>Pineapple</option>
<option>Banana</option>
</select>
<br><br>
<input type="button" onclick="changeText()" value="Set text of selected option">
</form>
</body>
</html>
Poista vaihtoehtoja avattavasta luettelosta
<!DOCTYPE html>
<html>
<head>
<script>
function removeOption() {
var x = document.getElementById("mySelect");
x.remove(x.selectedIndex);
}
</script>
</head>
<body>
<form>
<select id="mySelect">
<option>Apple</option>
<option>Pear</option>
<option>Banana</option>
<option>Orange</option>
</select>
<input type="button" onclick="removeOption()" value="Remove the selected option">
</form>
</body>
</html>