<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浏览器对象:操作表单</title>
<!-- html表单的输入控件主要有以下几种
1.文本框 对应的<input type="text">用于输入文本
2.口令框 对应的<input type="password">用于输入口令
3.单选框 对应的<input type="radio">用于选择一项
4.复选框 对应的<input type="checkbox">用于选择多项
5.下拉框 对应的<input type="select"> 用于选择一项
6. 隐藏文本 对应的<input type="hidden">用户不可见,但表单提交的时候,会把隐藏文本发送到服务器
1.可以使用.value获取input输入的值,但是这个不可以用于单选框和复选框;因为获取的永远都是HTML预设的值
2.对于单选框和复选框可以使用checked判断;
3.类似获取,设置值,可以使用 .value="" ; 对于单选和复选框,可以使用.checked
4.HTML5新增了大量标准控件,常用的包括: date datetime datetime-local color ,他们都使用input标签
5.
-->
</head>
<body>
<!-- 日期选择器 -->
<input type="date" name="" id="" value="2018-12-23" />
<br>
<input type="datetime-local" name="" id="" value="2018-12-23T02:03:04" />
<br>
<!-- 颜色选择 -->
<input type="color" name="" id="" value="green" />
<br>
<input type="text" name="test2" id="" value="" />
<br>
<!-- 提交表单 -->
<form action="" method="" id="test-form">
<input type="text" name="test" id="" value="" />
<button type="button" onclick="doSubmitForm()">submit</button>
</form>
<br>
<form id="login-form" method="post" onsubmit="return checkForm()">
<input type="text" id="username" name="username">
<input type="password" id="input-password">
<!-- 隐藏文本,用户不可见,但是表单提交的时候会把隐藏文件发送到服务器 -->
<!-- 所以这里我们设置了三个input实际上用户只能看到两个;虽然我们是把数据输入到了password里面,但是实际上是经过MD5之后,用了hidden来提交 -->
<!-- 用户输入的id为input-password的input没有name属性,没有name属性的input的数据不会被提交 -->
<input type="hidden" id="md5-password" name="password">
<button type="submit">Submit</button>
</form>
<script type="text/javascript">
// 第一种提交表单的方式: 通过form元素的submit方法提交一个表单,
function doSubmitForm() {
var form = document.getElementById("test-form");
form.submit();
}
function checkForm() {
var input_pwd = document.getElementById('input-password');
var md5_pwd = document.getElementById('md5-password');
// 把用户输入的明文变为MD5:
md5_pwd.value = toMD5(input_pwd.value);
// 继续下一步:
return true;
}
</script>
</body>
</html>
网友评论