JavaScript HTML 输入示例(Input)

 

一. 按钮对象

二.表单对象

三.选项和选择对象

 

 

 

 

 

 

 

 

一. 按钮对象

1.1  禁用按钮

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

 

1.2  查找按钮的名称

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

 

1.3  查找按钮的类型

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

 

1.4  查找按钮上显示的文本

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

 

1.5  查找按钮所属表单的id

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

 

 

 

 

 

二.表单对象

2.1  提交表格

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

 

2.2  重置表格

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

 

2.3  查找表单中每个元素的值

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

 

2.4  查找表单的可接受字符串

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

 

2.5  查找表单的动作属性

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

 

2.6  在表单中查找enctype属性的值

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

 

2.7  查找表单中元素的数量

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

 

2.8  查找发送表单数据的方法

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

 

2.9  查找表单的名称

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

 

2.10  查找表单的目标

 

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

 

 

 

 

 

 

三.选项和选择对象

3.1  禁用和启动下拉列表

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

 

3.2  获取包括下拉列表的表单ID

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

 

3.3  获取下拉列表中的选项数量

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

 

3.4  将下拉列表变成多行列表

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

 

3.5  在下拉列表中选择多个选项

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

 

3.6  在下拉列表显示选定的选项

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

 

3.7  显示下拉列表中的所有选项

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

 

3.8  在下拉列表中显示所选选项的索引

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

 

3.9  更改所选选项的文本

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

 

3.10  从下拉列表中删除选项

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

 

posted @ 2022-01-27 18:01  漫漫长路</>  阅读(680)  评论(0)  编辑  收藏  举报