首页 > 资讯 > JS 实例 > 正文

Form 对象

16-01-27 来源：[db:作者]

收藏我要投稿

返回一个表单中所有元素的value

源代码

Return the value of each element in the form:

运行结果

返回一个表单acceptCharset属性的值

源代码

The value of the accept-charset attribute is: <script> document.write(document.getElementById("frm1").acceptCharset) </script>

运行结果

返回一个表单action属性的值

源代码

<!DOCTYPE html>
<html>
<body>

<form id="frm1" action="demo-form.php">
First name: <input type="text" name="fname" value="Donald"><br>
Last name: <input type="text" name="lname" value="Duck"><br>
<input type="submit" value="Submit">
</form>

<p>The value of the action attribute is:
<script>
document.write(document.getElementById("frm1").action);
</script>
</p>

</body>
</html>

运行结果

返回表单中的enctype属性的值

源代码

<!DOCTYPE html>
<html>
<body>

<form id="frm1" enctype="text/plain">
First name: <input type="text" name="fname" value="Donald"><br>
Last name: <input type="text" name="lname" value="Duck"><br>
</form>

<p>Form data will be encoded as:
<script>
document.write(document.getElementById("frm1").enctype);
</script>
</p>

</body>
</html>

运行结果

返回一个表单中元素的数量

源代码

<!DOCTYPE html>
<html>
<body>

<form id="frm1" enctype="text/plain">
First name: <input type="text" name="fname" value="Donald"><br>
Last name: <input type="text" name="lname" value="Duck"><br>
</form>

<p>Form data will be encoded as:
<script>
document.write(document.getElementById("frm1").enctype);
</script>
</p>

</body>
</html>

运行结果

返回发送表单数据的方法

源代码

<!DOCTYPE html>
<html>
<body>

<form id="frm1" action="form_action.asp" method="get">
First name: <input type="text" name="fname" value="Donald"><br>
Last name: <input type="text" name="lname" value="Duck"><br>
<input type="submit" value="Submit">
</form>

<p>The method for sending form-data is:
<script>
document.write(document.getElementById("frm1").method);
</script>
</p>

</body>
</html>

运行结果

返回一个表单的name

源代码

<!DOCTYPE html>
<html>
<body>

<form id="frm1" name="form1">
First name: <input type="text" name="fname" value="Donald"><br>
Last name: <input type="text" name="lname" value="Duck"><br>
</form>

<p>The name of the form is:
<script>
document.write(document.getElementById("frm1").name);
</script>
</p>

</body>
</html>

运行结果

返回一个表单target属性的值

源代码

<!DOCTYPE html>
<html>
<body>

<form id="frm1" action="form_action.asp" target="_blank">
First name: <input type="text" name="fname" value="Donald"><br>
Last name: <input type="text" name="lname" value="Duck"><br>
<input type="submit" value="Submit">
</form>

<p>The value of the target attribute is: 
<script>
document.write(document.getElementById("frm1").target);
</script>
</p>

</body>
</html>

运行结果

重置表单

源代码

<!DOCTYPE html>
<html>
<head>
<script>
function formReset()
{
document.getElementById("frm1").reset();
}
</script>
</head>
<body>

<p>Enter some text in the fields below, then press the "Reset form" button 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="formReset()" value="Reset form">
</form>

</body>
</html>

运行结果

提交表单

源代码

<!DOCTYPE html>
<html>
<head>
<script>
function formSubmit()
{
document.getElementById("frm1").submit();
}
</script>
</head>
<body>

<p>Enter some text in the fields below, then press the "Submit form" button to submit the form.</p>

<form id="frm1" action="form_action.asp">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br><br>
<input type="button" onclick="formSubmit()" value="Submit form">
</form>

</body>
</html>

运行结果

点击复制链接与好友分享!回本站首页