当用户在一个文本域输入文本或从下拉列表中选择一个选项后就触发change事件，当用户在一个文本域中该数据不是每次用户输入一个键值时都会触发该事件。它仅仅当用户改变了值才会触发该事件。...开关按钮 复选框和单选元素为开关按钮，或称之为有两种视觉状态的按钮。即选中或未选中。通过对其单击，用户可以改变其开关状态。...单选元素为整组有相关性的元素而设计的，组内所有按钮的HTML属性name值都相同。按照这种方式创建的按钮为互斥的。利用表单属性的名字选中元素时，它返回的一个类数组对象而不是单个元素。...单选和复选框都定义了checked属性，指定了元素当前是否选中。defaultChecked属性也为布尔值，为html的checked值，指定了元素在第一次加载页面时是否选中。...注意是在页面加载的时候渲染，这点很容易迷 查询选取的文档 这个用来判断用户选择了那些文本 windw.getSelection().tostring(); 可编辑的内容 设置标签的contenteditable
在标签中包含一个type属性，根据不同的type属性值，输入字段拥有很多形式（可以是文本字段、复选框、掩码后的文本字段、单选按钮、按钮等）。...hidden 定义隐藏的输入字段 image 定义图像形式的提交按钮 password 定义密码字段，该字段中的字符被掩码处理 radio 定义单选按钮 reset 定义重置按钮，重置按钮会清除表单中的所有数据...标签还有其他很多属性，其常用属性如下： 属性 属性值 说明 name 由用户自定义 定义input元素的名称 value 由用户自定义 规定input元素的值 checked checked 规定此input元素首次加载时应被选中...maxlength 正整数 规定输入字段中字符的最大长度 注意点： name和value是每个表单元素都应该有的属性，主要是给后台人员使用 name是表单元素的名称，要求同一组单选按钮或同一组复选框有相同的...name值 checked属性主要针对于单选按钮和复选框，作用是打开页面时默认选中某个单选按钮或复选框 下拉表单元素 使用场景：在页面中，如果有多个选项让用户选择，并且想要节省页面空间，
> 提交按钮： 单选框： 提交：http://127.0.0.1:5000/?...选择文件后 普通按钮 按钮"> ?...重置按钮 输入内容后，点击重置会把填入的内容清空 图片按钮 点击图片后会提交 单选框，点击Java不会选中 ?...下拉框 选中「浙江」后提交:http://127.0.0.1:5000/?
-- 表单元素在这里 --> 元素定义了用户输入数据的区域，并且可以包含不同类型的输入元素，如文本域、下拉列表、单选框、复选框...单选按钮（Radio Buttons） 单选按钮和复选框可以让用户在多个选项中选择一个或多个。单选按钮的type属性值为 “radio”。...checked 属性用于指定单选框是否默认选中。...类型 属性 功能 使用场景 submit type="submit" 提交表单数据 提交登录表单、提交注册表单等 reset type="reset" 重置表单数据 重置搜索表单、重置购物车等 button...它可以接收各种类型的用户输入，例如文本、数字、日期等。
根据不同的type属性值,输入字段有很多种形式,输入字段可以是文本字段,复选框,掩码后的文本控件,单选按钮,按钮等....value:定义标签值(默认值) size:定义输入字段的长度(密码框的宽度) maxlength:定义可输入最大的字符个数 radio:定义单选按钮(单选框或者单选按钮...-- input 标签 当type=”reset“时 为重置按钮 value： 按钮上显示的文本 作用：具有重置的功能。...-- input 标签 当type=”reset“时 为重置按钮 value： 按钮上显示的文本 作用：具有重置的功能。...根据不同的 type 属性值，输入字段拥有很多种形式.输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等.
password : 密码框（用户看不见密码） (3) radio : 单选按钮（实现单选）【每个按钮加一个属性 name=""，且值需一样】 (4) checkbox...: 重置，还原表单元素初始状态【例子：重置表单，必须被 包围着】 (7) button : 普通按钮【例子：获取验证码】 (8) file...按钮被选中（对于 单选框 或者 多选框） 单选按钮和复选框可以设置checked 属性，当页面打开时候就可以默认选中这个按钮 --> 性别: 男 重置按钮可以还原表单元素初始的默认状态 --> <!
3.单选按钮 单选按钮用于单项选择，如选择性别、是否操作等。...需要注意的是，在定义单选按钮时，必须为同一组中的选项指定相同的name值，这样“单选”才会生效。此外，可以对单选按钮应用 checked属性，指定默认选中项。...6.提交按钮 提交按钮是表单中的核心控件，用户完成信息的输入后一般都需要单击提交按钮才能完成表单数据的提交。...可以对其应用 value属性，改变提交按钮上的默认文本。 7.重置按钮 当用户输入的信息有误时，可单击重置按钮取消已输入的所有表单信息。...在用户输入内容后，其右侧会附带一个删除图标，单击这个图标按钮可以快速清除内容。
案例中增加了13种常用的元件，分别为单行输入框、多行输入框、数字输入框、密码输入框、月份选择器、日期选择器、时间选择器、单选按钮组、多选按钮组、下拉列表、文件上传、评分控件、滑动滑块，你们也可以根据实际需要增加或删除...、多行输入框、数字输入框、密码输入框、月份选择器、日期选择器、时间选择器、单选按钮组、多选按钮组、下拉列表、文件上传、评分控件、滑动滑块，所以我们要动态面板里应该要有13个对应的状态。...2）交互设置 中继器没每项加载时，我们用设置面板状态的交互，将动态面板设置到状态面和type列的值对应的页面。 鼠标单击关闭按钮时，我们用删除行的交互，将当前行的内容删除。...设置完成后，在鼠标单击中继器内组合添加设置选中的交互，将背景矩形选中，这样就可以完成变色效果了。...，这里状态名也是要和type列里每行的值一一对应，有多少个元件类型就增加多少个状态页面，案例中包括了13种常用的元件，分别为单行输入框、多行输入框、数字输入框、密码输入框、月份选择器、日期选择器、时间选择器
-- form标签 1、标签用于为用户输入创建 HTML 表单。 2、表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。...-- rest类型 1、重置页面，清空页面输入的内容 2、可以通过value属性设置按钮显示 --> 类型 1、仅仅是按钮，配合js使用 2、可以通过value属性设置按钮显示 --> 按钮"...，其中的label不能在页面被选中 3、通过option设置选项，选项内容在页面可以选中 4、提交时select标签中的name作为键值对的键传递给后端 5、提交时option标签中的...-- label 1、通常和input标签一起使用 2、将label中的字段和input中的输入框或者按钮关联（通过id），在点击label字段时会自动选中关联的input内容
, 如 : 设置 text 类型 , 就是 输入框 ; name : 控件名称 , 用户自定义的字符串 ; value : 控件默认文本内容 , 用户自定义的字符串 ; size : 控件的宽度 ,...取值必须是正整数 , 单位像素 ; checked : 控件的默认状态是否被选中 , 值为 true 或 false ; maxlength : 控件可输入的最大字符数, 取值必须是正整数 ; 3、type...属性 input 标签的 type 属性值 : input 标签的 type 属性 , 用于 设置 控件类型 , 如 : 设置 text 类型 , 就是 输入框 ; text : 文本输入框 ; password...: 密码输入框 ; radio : 单选按钮 ; checkbox : 复选框 ; button : 按钮 ; submit : 提交按钮 ; reset : 重置按钮 ; image : 图像按钮...radio" name="sex"/> 女 展示效果 : 第二个单选选项默认选中
1.表单控件 1.input标记 1.input标记 提供文本输入框，密码输入框，按钮，单选按钮，多选按钮，文件上传框，隐藏域 2.属性... type:类型 根据不同的type值，创建不同的输入框 value：输入框的值 name:给输入框起个名字...submit" value="提交按钮"/> 3.重置按钮:reset 重置按钮... 下拉菜单2 实列: optgroup标签插入后在...在option写入 selected则默认该项下拉默认选中 2.option中的属性 selected:默认选中 3.select中的属性
--2秒后跳转到对应的网址，注意引号--> radio 单选框 submit 提交按钮... reset 重置按钮 重置" /> button 普通按钮 类型（type）说明： text：文本输入框 password：密码输入框 radio：单选框 checkbox：多选框 submit：提交按钮 button：可点击的按钮，没有任何行为...", "radio", "file"，为输入相关联的值 checked：radio和checkbox默认被选中的项 readonly：text和password设置只读 disabled：禁用模式（输入框显示灰色
根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。...其它常用属性: name:定义标签名称 value:定义标签值 size:定义输入字段的长度 maxlength:定义可输入最大字符个数 radio 定义单选按钮...其它常用属性: name:定义标签名称.注意，对于单选按钮，如果要想做到单一选择，多个radion的name值必一样。 value:定义标签值 checked:定义该标签默认被选中。...其它常用属性: name:定义标签名称 value:按钮显示名称 reset 定义重置按钮。重置按钮会清除表单中的所有数据。...关于标签详细用法，将在css中介绍 2.10.3 框架标签(基本不使用) 所谓框架就是将页面划分成几个窗框，就可以让我们在同一个浏览器中显示不止一个页面。
目录： 创建表单 表单的类型 表单输入的初级验证 创建表单 HTML中表单的创建使用标签（双标签） </form...action="index.html" 指的是表单提交成功后要跳转的页面。...表单标签的类型 文本框 maxlength：可限制输入框字符最大长度； 多行文本框 女 name 元素名称单选按钮中，name属性值相同为一组单选按钮。...checked 单选标签中，添加checked属性为默认选中。 value 添加value属性，用于接收。
href="#"时，表示被链接页面就是当前页面。...表单标签 （1）表单属性 HTML 表单用于接收不同类型的用户输入，用户提交表单时向服务器传输数据，从而实现用户与Web服务器的交互。...post提交的键值对不在地址栏. 2.安全性相对较高. 3.对提交内容的长度理论上无限制. （2）表单元素input text 文本框输入（默认text文本框类型）。 ...placeholder 框内预置内容(灰色)，写上内容时才消失 radio 单选按钮。...reset 重置按钮。清空表单的输入，恢复到表单默认的状态。 button 普通按钮。一般结合javascript使用。 文本域标签。
action="index.html"指的是表单提交成功后要跳转的页面。...="初始值"/>密码框 type="submit" 提交按钮 type="reset" 重置按钮 type="button" 普通按钮 type="image" 图片按钮 单选按钮 男...女 name 元素名称单选按钮中，name属性值相同为一组单选按钮。...checked input标签中，添加checked属性为默认选中。 value 添加value属性，用于接收。
常见表单 form 表单, 一般情况下，其他表单相关元素都是它的后代元素 input 单行文本输入框、单选框、复选框、按钮等元素 textarea 多行文本框 select、option 下拉选择框 button...) radio:单选框 checkbox:复选框 button:按钮 reset:重置 submit:提交表单数据给服务器 file:文件上传 readonly:只读 disabled:禁用 checked...:默认被选中 只有当 type 为 radio 或 checkbox 时可用 autofocus:当页面加载时，自动聚焦 name:名字 在提交数据给服务器时，可用于区分数据类型 value:取值 type...表单可以实现按钮效果: 普通按钮(type=button):使用value属性设置按钮文字 重置按钮(type=reset):重置它所属form的所有表单元素(包括input、textarea...radio的使用 我们可以将type类型设置为 radio 变成 单选框: name值相同的 radio 才具备单选功能 checkbox的使用 我们可以将type类型设置为checkbox变成多选框
单选框示例1.png Ⅱ.例2-checked属性 通过checked属性实现在默认情况下，选中哪一个单选框。 重置按钮 在HTML中，reset-重置按钮一般用来清除用户在表单中输入的内容，它其实也可以看成特殊的普通按钮。...重置按钮示例1.png （2）清除范围 重置按钮只能清空它所在form标签内表单中的内容，对于其所在之外。...重置按钮：一般用来清除用户在表单中输入的内容。 九、文件上传 在HTML中，文件上传也是使用input标签来实现的，其中type属性取值为file。...文件上传示例1.png 当我们点击 ”选择文件“ 这个按钮时，是上传不了文件的，需要结合后端技术。 十、多行文本框 单行文本框只能输入一行文本，而多行文本框能输入多行文本。
type="password" name：密码框名称(必填) size：密码框长度 --> 10.3.3 单选按钮...同一组单选按钮，name属性值必须相同，才能在选中单选按钮时达到互斥； <!...-- type="radio" name：单选框名称(必填)，一组的名称需要相同 checked：单选按钮选中状态 value：单选框的值 --> 聊天 玩游戏 10.3.5 select下拉列表 希望在页面加载时有默认选中的选中项...--重置按钮--> 按钮"> <!
-- 外链样式表 --> /*内部样式表*/ form表单属性 action:' '; 定义数据提交地址 target:' '; 页面打开方式 _block...text; 文本框 password; 密码框 radio; 单选框，需要指定相同的name名称 checkbox; 多选框 button; 按钮，没有特别的功能，多用来结合js提交数据 image;...图片按钮，提交数据 submit; 提交按钮 reset; 重置按钮 file; 文件上传 hidden; 隐藏表单，悄悄提交数据 name:' '; 控件名称 value:' '; 神奇用法...摸索...placeholder:' '; 输入框默认提示文字 checked:'checked'; 默认选中 disabled:'disabled'; 不可选中 下拉标签...'/> 提交按钮： 重置按钮：重置表单'/> 上传文件：<input type
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
