一个表格知道元素如何获取位置python 获取表单元素的值

转载

mob64ca13fd559d 2023-12-31 21:56:22

文章标签 ajax html5 表单重置用户名 文章分类 Python 后端开发

一、获取表单元素

通过 form.name 可以获取到相对应的表单元素。

<form action="#" method="post" id="form">
    <p>用户名: <input type="text" name="username" /></p>
    <p>密码:<input type="password" name="userpass" /></p>
    <p>性别:<input type="radio" name="usergender" checked value="男" />男
        <input type="radio" name="usergender" value="女" />女
    </p>
    <p>爱好: 
        <input type="checkbox" name="userhobby" value="吃饭">吃饭
        <input type="checkbox" name="userhobby" value="睡觉">睡觉
        <input type="checkbox" name="userhobby" value="写代码">写代码
    </p>
    <p>
        简介:
        <textarea name="userinfo"></textarea>
    </p>
    <p>
        <button type="button">注册</button>
    </p>
</form>

<script>
    //1、通过ID获取表单元素
    var form = document.getElementById("form");
    //2、获取按钮完成点击动作
    var btn = document.getElementsByTagName("button")[0];
    //3、根据form.表单元素的name名称获取到具体元素
    var username = form.username;
    var userpass = form.userpass;
    var usergender = form.usergender;
    var userhobby = form.userhobby;
    var userinfo = form.userinfo;

    console.log(username, userpass, usergender, userhobby, userinfo);

    btn.onclick = function () {
        //4、点击之后获取每一个表单元素的值
        console.log(username.value) //用户名：admin
        console.log(userpass.value) //密码：123456
        console.log(usergender.value)  //性别：男
        var str = ""
        for (var i = 0; i < userhobby.length; i++) {
            if (userhobby[i].checked) {
                str += userhobby[i].value + ','
            }
        }
        str = str.substring(0, str.length - 1);//爱好 比较特殊 选中的全部获取 
        console.log(str) //吃饭,写代码
        console.log(userinfo.value) //简介 1234
    }

</script>

二、表单事件

提交事件（form.onsubmit）
form.onsubmit 事件在表单提交时触发，触发事件调用的函数中默认 return true，表示允许表单提交，
return false 阻止表单提交。

<body>
    <form action="#" method="post" id="form1">
        <p>用户名: <input type="text" name="username"/></p>
        <p>
            <!--button按钮中type属性有三个值：submit（默认）、reset、button-->
            <button>注册</button>
        </p>
    </form> 
    <script>
         //1、通过ID获取表单元素
         var form = document.getElementById("form1");
         //2、通过form.onsubmit事件来触发表单提交
         form.onsubmit = function(){
             //3、通过form.name名称来获取对应的值，如果为空则不允许提交表单
             var username = form.username.value;
             if(username==""){
               //4、判断表单元素中是否值为空
                 alert('用户名为空');
               //5、阻止表单提交，也可以理解为阻止表单提交的默认行为（普通事件写法的阻止事件默认行为）
                 return false;
             }
         }
    </script>
</body>

重置事件
form.onreset 事件在表单重置时调用，return true 表示允许重置，return false 表示阻止表单重置。

<body>
    <form action="#" method="post" id="form1">
        <p>用户名: <input type="text" name="username"/></p>
        <p>
            <button>注册</button>
            <button type="reset">重置</button>
        </p>
    </form> 
    <script>
         //1、通过ID获取表单元素
         var form = document.getElementById("form1");
         //2、通过form.onreset事件来触发表单重置
         form.onreset = function(){
             //给出提交框向用户询问
             var isTrue = confirm("是否需要重置表单？");
             if(isTrue){
                 //如果点击的是确定按钮就重置表单
                return isTrue;
             }else{
                 //如果点击的试取消按钮就阻止表单重置
                return false;
             }
         }
    </script>
</body>

获取焦点（onfocus）、失去焦点（onblur）
onfocus 事件：当表单元素获得焦点时调用，即光标进入到了输入框
onblur事件：当表单元素失去焦点时调用，即光标离开了输入框

事件名称	语法结构
onfocus	表单元素.onfocus = function(){}
onblur	表单元素.οnblur= function(){}

举例：得到焦点给文本框设置背景，失去则清除背景

<form action="#" method="post" id="form">
    <p>用户名: <input type="text" name="username" /></p>
    <p>
        <button>注册</button>
        <button type="reset">重置</button>
    </p>
</form>
<script>
    var form = document.getElementById('form');
    //给文本框设置聚焦和失焦
    //先获取文本框
    var input = form.username;
    //设置聚焦事件
    //元素.onfocus = function(){}
    input.onfocus = function () {
        this.style.background = "pink";
    }
    //元素.onblur = function(){}
    input.onblur = function () {
        this.style.background = "";
    }
</script>

内容只要发生变化时触发的事件（实时监控）

事件名	语法结构	兼容浏览器
oninput	表单元素.oninput = function(){}	标准浏览器+IE9以上
onpropertychange	表单元素.onpropertychange = function(){}	ie8以及以下浏览器

举例：密码文本框的输入密码的强度

<form action="#" method="post" id="form">
    <p>用户名: <input type="text" name="username" /></p>
    <p>密码：<input type="password" name="userpass" />
        <span></span>
    </p>
    <p>
        <button>注册</button>
        <button type="reset">重置</button>
    </p>
</form>
<script>
    var form = document.getElementById('form');
    var span = document.getElementsByTagName("span")[0];
    form.userpass.oninput = inputchange;
    form.userpass.onpropertychange = inputchange;
    function inputchange() {
        if (this.value.length >= 12) {
            span.innerHTML = "强";
        } else if (this.value.length >= 9) {
            span.innerHTML = "中";
        } else if (this.value.length >= 6) {
            span.innerHTML = "弱";
        } else {
            span.innerHTML = "";
        }
    }
</script>

失去焦点时内容发生变化所触发的事件
语法结构：表单元素.onchange = function(){}

<form action="#" method="post" id="form">
    <p>用户名: <input type="text" name="username" /></p>
    <p>
        <button>注册</button>
        <button type="reset">重置</button>
    </p>
</form>
<script>
    var form = document.getElementById('form');
    form.username.onchange = function () {
        console.log(this.value);
    }
</script>

三、表单方法（发生情况在按钮上）

提交（submit）和重置（reset）
举例：普通按钮实现提交重置表单的效果

提交：表单.submit()

<form action="#" method="post" id="form">
    <p>用户名: <input type="text" name="username" /></p>
    <p>
        <button type="button">注册</button>
    </p>
</form>
<script>
    //1、通过ID获取表单元素
    var form = document.getElementById("form");
    //2、获取按钮完成点击动作
    var btn = document.getElementsByTagName("button")[0];
    //3、按钮点击事件
    btn.onclick = function () {
        var username = form.username.value;
        if (username != "") {
            //4、获取表单文本框的值，如果不为空则进行提交
            form.submit();
        } else {
            alert('用户名不能为空')
        }
    }
</script>

重置：表单.reset()

<form action="#" method="post" id="form">
      <p>用户名: <input type="text" name="username" /></p>
      <p>
          <button>重置</button>
      </p>
  </form>
  <script>
      //1、通过ID获取表单元素
      var form = document.getElementById("form");
      //2、获取按钮完成点击动作
      var btn = document.getElementsByTagName("button")[0];
      //3、按钮点击事件
      btn.onclick = function () {
          var isTrue = confirm("是否需要重置表单？");
          if (isTrue) {
              //如果点击的是确定按钮就重置表单
              form.reset();
          } else {
              //如果点击的试取消按钮就阻止表单重置
              return false;
          }
      }
  </script>

获取焦点（focus()）、失去焦点( blur() )

<form action="#" method="post" id="form">
    <p>用户名: <input type="text" name="username" /></p>
    </p>
</form>
<script>
    //1、通过ID获取表单元素
    var form = document.getElementById("form");
    var btn = document.getElementById('btn');
    //2、通过form.name名称获取表单
    form.username.focus();
    // form.username.blur();
</script>

四、localStorage（本地存储）

用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除，localStorage 属性是只读的。

存值：localStorage.key = value

取值：localStorage.key

【示例代码:】

localStorage.username = "admin";
localStorage.userpass = "123456";
console.log(localStorage)
console.log(localStorage.username)

案例：登录模拟数据存储到localStorage中，并比较结果，登录成功与否

涉及知识点：
i.JSON.stringify(javascript值) 方法用于将 JavaScript 值转换为 JSON 字符串。
ii.JSON.parse(JSON字符串) 方法用于将一个 JSON 字符串转换为对象。

<body>
	<form action="http://www.offcn.com" id="form">
        用户名：<input type="text" name="username"><br/>
        密码：<input type="password" name="userpass"/><br/>
        <button>登录</button>
    </form>
    
<script>
        var form = document.getElementById("form");
        var btn = document.getElementsByTagName("button")[0];
        var username = form1.username;
        var userpass = form1.userpass;
        form.onsubmit = function(){
            //还可以一次性存储多个值
            var obj = [{"username":"admin","userpass":"123456"},{"username":"张三","userpass":"123456"}]
            //JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。
            var value = JSON.stringify(obj); //[{"username":"admin","userpass":"123456"},{"username":"张三","userpass":"123456"}]
            localStorage.arr = value;
            //JSON.parse() 方法用于将一个 JSON 字符串转换为对象。
            var data = JSON.parse(localStorage.arr);
            //console.log(data); //[{…}, {…}]

            var tag = true; //创建一个比对的假设条件
            for(var i = 0 ; i < data.length;i++){
                if(data[i].username != username.value && data[i].userpass != userpass.value){
                    tag = false;
                    break;
                }
            }
            if(tag==true){
                alert('用户登录成功');
                form.submit();
                return true;
            }else{
                alert('用户登录失败');
                return false;
            }
        }
    </script>
</body>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。