1.Form对象type类型

最新推荐文章于 2022-10-02 18:07:20 发布

原创最新推荐文章于 2022-10-02 18:07:20 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #action #encoding #web服务 #button

本文介绍了HTML表单元素的种类及其JavaScript对象表示，并详细说明了如何通过JavaScript操作这些表单元素，包括命名表单和表单元素、表单元素的属性及事件处理等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

input 的type类型 text 文本域 password 密码框， hidden 隐藏框， submit 提交框， radio单选框，checkbox复选框， reset重置框， image图片按钮

1.Form对象
   JavaScript的Form对象代表了一个HTML表单
   Form对象的属性：
       elements[]数组，包含表示各种表单输入元素的JavaScript对象。
       action /encoding / method /target 直接对应 HTML<form>的性质action / encoding / method/target
   Form对象的方法：
       onsubmit() 用来探测表彰的提交，在表彰提交之前调用的，返回false,就会取消表单的提交。
       onreset() 用来探测表间的重置，在重置表单时被调用，返回false,可以阻止重置表单元素。

2.定义表单元素

HTML表单元素
对象	HTML标记	type属性	描述和事件
Button	<input type="button">或 <button type="button">	"button"	按扭；onclick
Checkbox	<input type="checkbox">	"checkbox"	不具有单选按钮行为的切换按扭；onclick
FileUpload	<input type="file">	file	用于输入要上载到Web服务器的文件名的输入框；onchange
Hidden	<input type="hidden">	hidden	随着表单提交的数据，对用户不可见；没有事件处理程序
OPtion	<option>	无	Select对象中的一个项目；事件处理程序属于Select对象，而不属于单独的Option对象
Password	<input type="password" >	"password"	输入口令的输入框，输入的字符不可见；onclick
Radio	<input type="radio">	"radio"	具有单选按扭行为的切换按扭；onclick
Reset	<input type="reset">或 <button type="reset">	"reset"	重置表单的按扭；onclick
Select	<select>	"select-one"	列表或下拉式菜单，可选中其中一个项目；onchange
Select	<select multiple>	"select-mutiple"	列表，可以选中其中多个项目；onchange
Submit	<input type="submit">或 <button type="submit">	"submit"	提交表单的按扭；onclick
Text	<input type="text">	"text"	单行的文本输入框；onchange
Textarea	<textarea>	"textarea"	多行的文本输入框；onchange

3.脚本化表单元素

    ３.1 命名表单和表单元素
   第个表单元素都有name性质，要将表单提交给服务器端程序，必须在相应的HTML标记中设置这一性质。
　　３.2 表单元素的属性
   type 一个只读字符串，标识表单元素的类型。
   form 对包含这个元素的Form对象的只读引用。
   name 由HTML的name性质指定的只读字符串。
   value 一个可读可写的字符串，指定了表单元素包含或表示的值。
     3.3 表单元素的事件处理程序
   onclick 当启用在元素上点击鼠标，对于Buttion元素和与之相关的表彰元素来说这个处理程序格外有用。
   onchange 当用户改变了元素表示的值时触发；
   onfocus 在表单元素收到输入焦点时触发
   onblur 在表彰失去输入焦点时触发
4.表单验证示例