表单的元素

最新推荐文章于 2023-10-17 15:39:21 发布
最新推荐文章于 2023-10-17 15:39:21 发布
阅读量120 收藏
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Thebestroy/article/details/127215583
版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        表单作用:用于收集不同类型的用户,输入的数据
        表单的组成:表单元素和表单区域两部分组成,缺一不可2.部分组成

    -->
    <!-- 
        1.表单区域:
            <form action=""></form>双标签
        作用:定义表单区域,里面可以包含表单元素,实现用户信息的收集和传递
        2.表单元素:
        是用户在表单中输入内容的标签

        input 标签 单标签
             type="属性值不同,可以展现不同的表单形式"

             type的常用类型:
                  type="text"
                    作用:单行文本输入框
                  type="passwrod"
                    作用:密码输入框
                   <input type="radio">
                    作用:单选框
                   <input type="checkbox">
                    作用:多选框
                   <input type="button">:
                    作用:普通按钮
                        <input type="button" value="按钮">
                         value属性:定义按钮显示的文本
                    <input type="submit">
                     作用:定义提交按钮:
                           <input type="submit" value="提交按钮">
                        value属性:可以修改默认的"提交"文本内容;
                    <input type="reset">
                     作用:定义重置按钮,将表单元素里的内容回到最初的状态(初始状态)
                      value属性:可以修改默认的"重置"文本内容;
                    <input type="file">
                     作用:用于文件上传
                     <input type="image">
                     作用:定义图片形式的提交按钮
                     属性:
                        src:指定图片的路径
                        alt:指定替换文本
                    textarea标签 双标签
                      作用:定义多行文本域
                      属性:
                         cols:宽度大小
                         rows:高度大小 行数
                    select标签 双标签
                     作用:定义下拉列表
                     option标签:定义列表项
     -->
     <form action="">
          <!-- 表单元素 -->
            <input type="text">
            <input type="password">

            <!-- 单选框 -->
            <input type="radio" name="six">男
            <input t

Thebestroy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery给动态添加的元素绑定事件的方法
12-29
本文实例讲述了jQuery给动态添加的元素绑定事件的方法。分享给大家供大家参考。具体分析如下： jquery中绑定事件一般使用bind，或者click，但是这只能是对已经加载好的元素定义事件，那些后来添加插入的元素则需要另行绑定。在1.7版本以前使用live。但是在1.8版本以后推荐使用on。这里介绍jQuery中如何给动态添加的元素绑定事件 在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况 例如 <div id=testdiv> <ul></ul> </div> 需要给<ul>里面动态添加的<li>标签添加click事件   jquery 1.7版以前使用live
jQuery事件绑定
m0_67388537的博客
07-07 2383
jQuery 事件对象常用属性也与之前学过的 DOM 事件对象几乎一致，多了一个。旧的 jQuery 事件绑定方法如。jQuery 允许给同一个 jQ 对象的同一个事件绑定多个不同的事件处理函数。jQuery 事件中的事件对象通过事件处理函数的形参获取，事件中的。指向绑定事件的 jQuery 对象代表的 DOM 对象，如果使用。等都可以使用第一种方式绑定事件，但也有特殊的如输入框的。方式添加的事件委托，委托事件处理函数中的。上的属性，与原生事件中的事件对象一致。jQuery 事件中的。
前端学习（146）：伪类选择器checked和disable和focus
歌谣的博客
12-18 624
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
【JavaScript】-- 利用JS实现全选/取消全选
qq_48802092的博客
08-30 3153
实现要求： 点击"全选"框，以下所有选项全部勾选。 把"全选"框从选中状态勾选成未选中状态，其他复选框全部取消选中效果。 当其他复选框全部选中，"全选框"为选中状态。 当其他复选框有一个未选中，"全选框"取消选中状态。...
js一键全选/全不选
m0_74913905的博客
04-03 725
如何用js实现全选全不选
JavaScript实现动态添加Form表单元素的方法示例
10-19
在JavaScript中，动态添加Form表单元素是一种常见的需求，特别是在用户需要输入不确定数量的数据时，如上传文件、填写多条信息等。本文将详细介绍如何利用JavaScript实现动态添加表单元素，并提供一个具体示例，涉及...
关于html的表单元素详解(一)
09-28
主要介绍了关于html的表单元素，文中讲解了Action 属性Method 属性-下拉列表：< select > 元素-按钮：< button> 元素等，具体操作步骤大家可查看下文的详细讲解，感兴趣的小伙伴们可以参考一下。
jquery 获取表单元素里面的值示例代码
10-27
本文为大家详细介绍下通过jquery获取表单元素CheckBox、Radio等的值，有需求的朋友可以参考下，希望对大家有所帮助
JS document form表单元素操作完整示例
10-15
- `elements` 属性：返回一个HTMLFormControlsCollection集合，包含所有表单元素，可以使用索引来访问，如 `alert(fm.elements)` 和 `alert(fm.elements.length)`。 3. **表单属性操作**： - `action` 属性：用于...
AngularJS实现表单元素值绑定操作示例
10-19
在AngularJS中，表单元素值绑定是一种核心特性，它使得数据模型与用户界面之间能够实时同步，大大简化了前端开发。本示例将详细解析如何利用AngularJS实现这一功能，以及相关的操作技巧。 首先，AngularJS中的`ng-...
HTML中的Switch开关
新手上路的博客
12-19 6792
1.编写HTML代码 <!DOCTYPE html> <html> <head> <title>demo</title> <script type="text/javascript" src="lib/jquery.js"></script> <script type="text/javascript"src="js/on_off_switch.
vue----label中for作用
javasvince的博客
08-03 8773
vue----label中for作用 效果 点击label标签 点击按钮 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>label中for的作用</title> <script src="vue.js"></scr...
JS基础-全选与取消全选案例
qq_43781887的博客
04-16 2910
主要需要完成的功能有两个： 1.选择上面的全选按钮之后下面的按钮全部被选中，取消全部的按钮就取消全选。 2.每次点击下面按钮就去检查是不是所有的按钮都选中了,要是所有的按钮都选中了把最上面的全选按钮就要选中,要是有一个没选中上面全选按钮就不选中。 实现思路： 1.针对第一个功能，可以采用一个flag变量来判断，设置初始值为0也就是全选按钮不选中，然后点击全选按钮判断，判断flag是否为0，如果为0就把所有的下面按钮选中，同时把flag变为1，如果flag为1，则把下面的按钮的checked都变为..
Jquery绑定事件的方法
zybijiso666的博客
08-01 905
delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。规定当事件发生时运行的函数(监听函数)，可传入event对象，这里的event是jQuery封装的event对象，与原生的event对象有区别，使用时需要注意。添加一个或多个事件处理程序到当前或未来的被选元素。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 delegate() 方法）。，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。
Vue的label标签中for的作用
weixin_43825727的博客
12-18 8856
先上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Vue De
html实现switch开关
最新发布
wsdbz的博客
10-17 1825
【代码】html实现switch开关。
原生js实现复选框选全部框与取消全选框
B13362260109的博客
07-17 244
【代码】原生js实现复选框选全部框与取消全选框。
jq事件绑定四种方式
热门推荐
zuo_zuo_blog的博客
05-13 1万+
1. 简单事件绑定： 这种绑定事件方式不会重叠 $(document).click(function () { alert(1); }) 2. bind方式（不推荐，1.7以后的jQuery版本被on取代） $(document).bind("click mouseenter",function () { alert(1); }) 比简单事件绑定方式...
jQuery---绑定事件
Philo的博客
01-23 7269
js—绑定事件 文章目录一、最常用方法二、bind函数三、on函数四、delegate函数 一、最常用方法 $(“元素选择器”).事件名称(匿名函数) 举例1： //这里的button为元素选择器，click为鼠标点击事件 $("button").click(function(){ //函数内容 }) 举例2： //这里的#btn1为id选择器即id名为btn1的元素，mouseenter为鼠标聚焦事件 $("#btn1").mouseenter(function(){
HTML5表单元素详解与验证实践
1. **表单元素** - `<form>`: 是HTML5中的核心表单元素，用于定义一组输入控件和提交处理逻辑。`<form>`标签包含了`method`属性，其默认值是GET，但也可以设置为POST，用于指定数据提交的方式。`action`属性定义了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值