加入收藏 | 设为首页
我要投稿

小码哥的IT人生

首页 > JS > JavaScript基础

JavaScript HTML 输入实例

JavaScript基础 2022-04-25 01:55:18小码哥的IT人生shichen

JavaScript HTML 输入实例

使用 JavaScript 访问和操作 HTML input 对象的实例。

Button 对象

完整实例【禁用按钮】：

<!DOCTYPE html>
<html>
<body>
<form>
<input type="button" id="btn01" value="确定">
</form>
<p>单击“禁用”按钮以禁用“确定”按钮：</p>
<button onclick="disableElement()">禁用</button>
<script>
function disableElement() {
  document.getElementById("btn01").disabled = true;
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【确定按钮的名称】：

<html>
<body>
<form>
<input type="button" id="button1" name="button1" value="Click Me!" />
</form>
<p>The name of the button is: 
<script type="text/javascript">
x=document.getElementById('button1');
document.write(x.name);
</script></p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【确定按钮的类型】：

<!DOCTYPE html>
<html>
<head>
<script>
function alertType()
{
alert(document.getElementById("myButton").type)
}
</script>
</head>
<body>
<button id="myButton" type="button" onclick="alertType()">点击这里</button>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【查找按钮的值】：

<!DOCTYPE html>
<html>
<body>
<form id="frm1" action="/demo/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>单击“试一试”按钮返回“HTML”按钮的值：</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
  var x = document.getElementById("btn1").value;
  document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【查找按钮上显示的文本】：

<!DOCTYPE html>
<html>
<body>
<form id="frm1" action="/demo/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>单击“试一试”按钮返回“HTML”按钮上的文本：</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
  var x = document.getElementById("btn1").innerHTML;
  document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【查找按钮所属表单的 id】：

<!DOCTYPE html>
<html>
<body>
<form id="form1">
<button id="btn1" type="button">HTML</button>
</form>
<p>单击“试一试”按钮以显示 HTML 按钮所属表单的 id：</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
  var x = document.getElementById("btn1").form.id;
  document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

Form 对象

完整实例【提交表单】：

<html>
<head>
<script type="text/javascript">
function formSubmit()
{
document.getElementById("myForm").submit()
}
</script>
</head>
<body>
<p>在下面的文本框中输入一些文本，然后点击提交按钮就可以提交表单。</p>
<form id="myForm" action="/skin/i/eg_smile.gif" method="get">
名：<input type="text" name="firstname" size="20"><br />
姓：<input type="text" name="lastname" size="20"><br />
<br />
<input type="button" onclick="formSubmit()" value="提交">
</form>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【重置表单】：

<html>
<head>
<script type="text/javascript">
function formReset()
{
document.getElementById("myForm").reset()
}
</script>
</head>
<body>
<p>在下面的文本框中输入一些文本，然后点击重置按钮就可以重置表单。</p>
<form id="myForm">
姓名：<input type="text" size="20"><br />
年龄：<input type="text" size="20"><br />
<br />
<input type="button" onclick="formReset()" value="重置">
</form>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【查找表单中每个元素的值】：

<!DOCTYPE html>
<html>
<body>
<form id="frm1" action="/demo/demo_form.php">
  名：<input type="text" name="fname" value="Bill"><br>
  姓：<input type="text" name="lname" value="Gates"><br><br>
  <input type="submit" value="提交">
</form> 
<p>单击“试一试”以显示表单中每个元素的值。</p>
<button onclick="myFunction()">试一试</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>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【查找表单可接受的字符集】：

<html>
<head>
<script type="text/javascript">
function showCharset()
{
var x=document.getElementById("myForm")
alert(x.acceptCharset)
}
</script>
</head>
<body>
<form id="myForm" acceptCharset="ISO-8859-1">
Text: <input type="text" value="Hello World!">
<input type="button" onclick="showCharset()" value="Show charset">
</form>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【查找表单的 action 属性】：

<html>
<head>
<script type="text/javascript">
function changeAction()
{
var x=document.getElementById("myForm")
alert("Original action: " + x.action)
x.action="/news/93.html"
alert("New action: " + x.action)
x.submit()
}
</script>
</head>
<body>
<form id="myForm" action="/skin/i/eg_smile.gif">
名称：<input type="text" value="米老鼠" />
<input type="button" onclick="changeAction()"
value="改变 action 属性并提交表单" />
</form>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【查找表单中 enctype 属性的值】：

<html>
<head>
<script type="text/javascript">
function showEnctype()
  {
  var x=document.getElementById("myForm")
  alert(x.enctype)
  }
</script>
</head>
<body>
<form id="myForm" enctype="application/x-www-form-urlencoded">
Name: <input type="text" value="Mickey Mouse" />
<input type="button" onclick="showEnctype()"
value="Show enctype" />
</form>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【查找表单中的元素数量】：

<html>
<body>
<form id="myForm" method="get">
Name: <input type="text" size="20" value="Bill Gates" /><br />
Text: <input type="text" size="20" value="Hello World" />
</form>
<script type="text/javascript">
document.write("Number of elements in myForm: ");
document.write(document.getElementById('myForm').length);
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【查找发送表单数据的方法】：

<html>
<head>
<script type="text/javascript">
function showMethod()
  {
  var x=document.getElementById("myForm")
  alert(x.method)
  }
</script>
</head>
<body>
<form id="myForm" method="post">
名称：<input type="text" value="米老鼠" />
<input type="button" onclick="showMethod()" value="显示 method" />
</form>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【查找表单的名称】：

<html>
<body>
<form id="myForm" method="get" name="myForm">
Name: <input type="text" size="20" value="Bill Gates" />
</form>
<script type="text/javascript">
document.write("Form name: ");
document.write(document.getElementById('myForm').name);
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【查找表单的目标（target）】：

<!DOCTYPE html>
<html>
<body>
<form id="frm1" action="/demo/demo_form.php" target="_self">
  名：<input type="text" name="fname" value="Bill"><br>
  姓：<input type="text" name="lname" value="Gates"><br><br>
  <input type="submit" value="提交">
</form>
<p>点击“试一试”以显示表单的目标：</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
  var x = document.getElementById("frm1").target;
  document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

Option 和 Select 对象

完整实例【禁用并启用下拉列表】：

<html>
<head>
<script type="text/javascript">
function disable()
  {
  document.getElementById("mySelect").disabled=true
  }
function enable()
  {
  document.getElementById("mySelect").disabled=false
  }
</script>
</head>
<body>
<form>
<select id="mySelect">
  <option>苹果</option>
  <option>桃子</option>
  <option>香蕉</option>
  <option>桔子</option>
</select>
<br /><br />
<input type="button" onclick="disable()" value="禁用列表">
<input type="button" onclick="enable()" value="启用列表">
</form>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【获取包含下拉列表的表单的 id】：

<html>
<body>
<form id="myForm">
<select id="mySelect">
  <option>Apple</option>
  <option>Pear</option>
  <option>Banana</option>
  <option>Orange</option>
</select>
</form>
<p>这个下拉列表的 id 是：
<script type="text/javascript">
document.write(document.getElementById("mySelect").id)
</script>
</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【获取下拉列表中的选项数量】：

<html>
<head>
<script type="text/javascript">
function getLength()
  {
  alert(document.getElementById("mySelect").length)
  }
</script>
</head>
<body>
<form>
<select id="mySelect">
  <option>苹果</option>
  <option>桃子</option>
  <option>香蕉</option>
  <option>桔子</option>
</select>
<input type="button" onclick="getLength()" value="在这个列表中，有多少选项？">
</form>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【将下拉列表转换为多行列表】：

<html>
<head>
<script type="text/javascript">
function changeSize()
  {
  document.getElementById("mySelect").size=4
  }
</script>
</head>
<body>
<form>
<select id="mySelect">
  <option>苹果</option>
  <option>桃子</option>
  <option>香蕉</option>
  <option>桔子</option>
</select>
<input type="button" onclick="changeSize()" value="改变大小">
</form>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【在下拉列表中选择多个选项】：

<html>
<head>
<script type="text/javascript">
function selectMultiple()
  {
  document.getElementById("mySelect").multiple=true
  }
</script>
</head>
<body>
<form>
<select id="mySelect" size="4">
  <option>苹果</option>
  <option>桃子</option>
  <option>香蕉</option>
  <option>桔子</option>
</select>
<input type="button" onclick="selectMultiple()" value="选择多个">
</form>
<p>在您点击 “选择多个” 按钮之前，请尝试同时选取多个选项。在点击 “选择多个” 按钮之后，请再试一次。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【在下拉列表中显示所选选项】：

<!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 id="mySelect">
  <option>Apple</option>
  <option>Orange</option>
  <option>Pineapple</option>
  <option>Banana</option>
</select>
<br><br>
<input type="button" onclick="getOption()" value="点击这里">
</form>
<p id="demo"></p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【显示下拉列表中的所有选项】：

<!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 id="mySelect">
  <option>Apple</option>
  <option>Orange</option>
  <option>Pineapple</option>
  <option>Banana</option>
</select>
<br><br>
<input type="button" onclick="getOptions()" value="输出所有选项">
</form>
<p id="demo"></p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【在下拉列表中显示所选选项的索引】：

<!DOCTYPE html>
<html>
<head>
<script>
function getIndex() {
  document.getElementById("demo").innerHTML =
  document.getElementById("mySelect").selectedIndex;
}
</script>
</head>
<body>
<form>
请选择您喜欢的水果：
<select id="mySelect">
  <option>Apple</option>
  <option>Orange</option>
  <option>Pineapple</option>
  <option>Banana</option>
</select>
<br><br>
<input type="button" onclick="getIndex()" 
value="显示所选选项的索引">
</form>
<p id="demo"></p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【更改所选选项的文本】：

<html>
<head>
<script type="text/javascript">
function changeText()
  {
  var 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="设置所选选项的文本">
</form>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【从下拉列表中删除选项】：

<html>
<head>
<script type="text/javascript">
function removeOption()
  {
  var x=document.getElementById("mySelect")
  x.remove(x.selectedIndex)
  }
</script>
</head>
<body>
<form>
<select id="mySelect">
  <option>苹果</option>
  <option>桃子</option>
  <option>香蕉</option>
  <option>桔子</option>
</select>
<input type="button" onclick="removeOption()" value="删除被选的选项">
</form>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

相关阅读

版权所有 © 小码哥的IT人生
Copyright © phpcodeweb All Rights Reserved
 ICP备案号：苏ICP备17019232号-2  

苏公网安备 32030202000762号

© 2021-2024