表单是什么 form DOM树
文本框 text
下拉框 <select>
单选框 radio
多选框 checkbox
隐藏域 hidden
密码框 password
.....
表单的目的:提交信息
获得要提交的信息
<form action="post"> <p> <span>用户名:</span> <input type="text" id="username"> </p> <!-- 多选框的值,就是定义好的value--> <p> <span>性别:</span> <input type="radio" name="sex" value="man" id="boy">男 <input type="radio" name="sex" value="woman" id="girl">女 </p> </form> <script> let input_text = document.getElementById('username'); let boy_radio = document.getElementById('boy'); let girl_radio = document.getElementById('girl'); //得到输入框的值 input_text.value; //修改输入框的值 input_text.value = '123'; //对于单选框,多选框等等固定的值,boy_radio.value只能取到当前的值 boy_radio.checked;//查看返回的结果,是否为true,如果为true,则被选中~ girl_radio.checked = true;//赋值
提交表单。md5加密密码,表单优化
<!--表单绑定提交事件 onsubmit = 绑定一个提交检测的函数,true,false 将这个结果返回给表单,使用onsubmit 接收! onsubmit="return aaa()" --> <form action="https://www.baidu.com/" method="post" onsubmit="return aaa()"> <p> <span>用户名</span> <input type="text" id="username" name="username"> </p> <p> <span>密码</span> <input type="password" id="input-password"> </p> <input type="hidden" id="md5-password" name="password"> <button type="submit">提交</button> </form> <script> function aaa(){ alert('1') let uname = document.getElementById('username'); let pwd = document.getElementById('input-password'); let md5pwd = document.getElementById('md5-password'); console.log(uname.value); //MD5算法 md5pwd.value=md5(pwd.value); //可以校验判断表单内容,true就是通过提交,false,阻止提交 return false;