Příklady HTML vstupu JavaScriptu


Obsah

    Zobrazit obsah


Příklady použití JavaScriptu pro přístup a manipulaci s HTML vstupní objekty.


Tlačítko Objekt

Zakázat tlačítko

<!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>

Najděte název tlačítka

<!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>

Najděte typ tlačítka

<!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>

Najděte hodnotu tlačítka

<!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>

Najděte text zobrazený na tlačítku

<!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>

Najděte id formuláře, ke kterému tlačítko patří

<!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>

Objekt formuláře

Odešlete formulář

<!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>

Obnovit formulář

<!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>

Najděte hodnotu každého prvku ve formuláři

<!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>

Najděte přijatou znakovou sadu formuláře

<!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>

Najděte atribut akce formuláře

<!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>

Najděte hodnotu atributu enctype ve formuláři

<!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>

Najděte počet prvků ve formuláři

<!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>

Najděte způsob odeslání dat formuláře

<!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>

Najděte název formuláře

<!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>

Najděte cíl formuláře

<!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>

Možnost a výběr objektů

Zakázat a povolit rozevírací seznam

<!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>

Získejte ID formuláře, který obsahuje rozevírací seznam

<!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>

Získejte počet možností v rozevíracím seznamu

<!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>

Přeměňte rozevírací seznam na víceřádkový seznam

<!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>

V rozevíracím seznamu vyberte více možností

<!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 &quot;Select multiple", you can.</p>

</body>
</html>

Zobrazte vybranou možnost v rozevíracím seznamu

<!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>

Zobrazit všechny možnosti z rozevíracího seznamu

<!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>

Zobrazte index vybrané možnosti v rozevíracím seznamu

<!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>

Změňte text vybrané možnosti

<!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>

Odeberte možnosti z rozevíracího seznamu

<!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>