JS基础-操作表单

简介: 操作表单

操作表单(验证)

表单是什么 from DOM树

  • 文本框 text
  • 下拉框 <Select>
  • 单选框 radio
  • 多选框 checkbox
  • 隐藏域 hidden
  • 密码框 password
  • ....

表单的目的:提交信息

    <form action="post">
                <span>用户名</span> <input type="text" id="username">
        </form>

        <script>
        var input_text=document.getElementById('username')
        </script>
  • input_text.value得到输入框的值
  • input_text.value='xutu'修改输入框的值

QQ截图20220604214141.png

        <form action="post">
                <p>
                    <span>性别:</span>
                    <input type="radio" name="sex" value="man" id="boy">男
                    <input type="radio" name="sex" value="woman" id="girl">女
                </p>
        </form>

        <script>
        var boy_radio=document.getElementById('boy')
        var girl_radio=document.getElementById('girl')
        </script>
  • 对于单选框,多选框无法通过value的方法取到,只能获得当前的值

QQ截图20220604214903.png

  • boy_radio.checked 查看返回的结果,是否为true,如果为true,则被选中
  • boy_radio.checked=true赋值

提交表单

        <form action="#">
                <span>用户名</span> <input type="text" id="username">
                <p>
                <span>密码 </span><input type="password" name="password" id="password"/>
                </p>
                <button type="submit" onclick="xitu()">提交</button>
        </form>
        <script>
        function xitu(){
var use=document.getElementById('username')
var pas=document.getElementById('password')
console.log(use.value)
console.log(pas.value)
}

        </script>

QQ截图20220604220815.png

  • 绑定事件 onclick 被点击
  • 此方法不安全可以使用Md5进行加密
  • 表单绑定提交事件,onsubmit绑定一个提交检测的函数,true ,false,将这个结果返回给表单,使用onsubmit接受

jQuery

JavaScript jQuery库,里面存在大量的JavaScript函数

  • jQuery是一个快速、简洁的JavaScript]框架,是继Prototype之后又一个优秀的JavaScript代码库(框架)jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的CSS选择器,并且可对选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件
  • 公式 : $(selector).action()
相关文章
|
27天前
ractive.js联系表单动画效果源码
一款ractive.js联系表单动画效果,很有创意的发送邮件、联系内容等表单,基于ractive.js实现的动画效果,以发送信件的方式。
24 1
|
1月前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
46 3
|
2月前
|
JavaScript 数据安全/隐私保护
2024了,你会使用原生js批量获取表单数据吗
2024了,你会使用原生js批量获取表单数据吗
53 4
|
2月前
|
JavaScript 前端开发 数据安全/隐私保护
前端技术分享:使用Vue.js构建响应式表单
【10月更文挑战第1天】前端技术分享:使用Vue.js构建响应式表单
|
3月前
|
移动开发 JavaScript 前端开发
js之操作表单 | 12-4
js之操作表单 | 12-4
|
3月前
|
移动开发 前端开发 JavaScript
JavaScript 表单
JavaScript 表单
29 9
|
3月前
|
人工智能 前端开发 JavaScript
react js 处理表单( form )的2个例子
react js 处理表单( form )的2个例子
|
4月前
|
大数据 数据处理 分布式计算
JSF 逆袭大数据江湖!看前端框架如何挑战数据处理极限?揭秘这场技术与勇气的较量!
【8月更文挑战第31天】在信息爆炸时代,大数据已成为企业和政府决策的关键。JavaServer Faces(JSF)作为标准的 Java Web 框架,如何与大数据技术结合,高效处理大规模数据集?本文探讨大数据的挑战与机遇,介绍 JSF 与 Hadoop、Apache Spark 等技术的融合,展示其实现高效数据存储和处理的潜力,并提供示例代码,助您构建强大的大数据系统。
55 0
|
4月前
|
Devops 持续交付 测试技术
JSF遇上DevOps:开发流程将迎巨变?一篇文章带你领略高效协同的魅力!
【8月更文挑战第31天】本文探讨了如何在JavaServer Faces(JSF)开发中融入DevOps文化,通过持续集成与部署、自动化测试、监控与日志记录及反馈机制,提升软件交付速度与质量。文中详细介绍了使用Jenkins进行自动化部署、JUnit与Selenium进行自动化测试、ELK Stack进行日志监控的具体方法,并强调了持续改进的重要性。
43 0
|
4月前
|
前端开发 微服务 API
微服务浪潮下的JSF革新:如何在分散式架构中构建统一而强大的Web界面
【8月更文挑战第31天】随着微服务架构的兴起,企业将应用拆分成小型、独立的服务以提高系统可维护性和可扩展性。本文探讨如何在微服务架构下构建和部署JavaServer Faces (JSF) 应用,通过RESTful服务实现前后端分离,提升灵活性和适应性。
65 0