表单

  1. 表单基础
  • 提交表单
<!--通用提交按钮-->
<input type="submit" value="Submit Form">
<!--自定义提交按钮-->
<button type="submit">Submit Form</button>
<!--图像按钮-->
<input type="image" src="graphic.gif">
//在相应表单控件拥有焦点的情况下,按回车键可提交表单,触发submit事件
var form = document.getElementById("myForm");
// 提交表单  
form.submit();
  • Tips: 解决重复提交表单的问题的两个方法
    1)在第一次提交表单后就禁用提交按钮
    2)利用onsubmit事件处理程序取消后续的表单提交操作
  • 重置表单
    单击重置按钮,表单会被重置
<!--通用重置按钮-->
<input type="reset" value="Reset Form">
<!--自定义重置按钮-->
<button type="reset">Reset Form</button>
var form = document.getElementById("myForm");
//重置表单 
 form.reset();
  1. 文本框脚本
  • 选择文本
select()//选择文本框中文本时触发
selectionStart//文本选区开头偏移量
selectionEnd//文本选取结尾偏移量
setSelectionRange()//接收两个参数,要选择的第一个字符的索引和要选择的最后一个字符之后的字符的索引
selectText()//接收三个参数:要操作的文本框、要选择文本中第一个字符的索引和最后一个字符之后的索引
  1. 选择框
    通过<select>和<option>元素创建
    select的属性和方法
add(newOption, relOption)//向控件插入新元素,在relOption之前
multiple:布尔值,是否允许多项选择
options:控件中所有<option>
remove(index):移除指定位置的选项
selectedIndex:基于0的选中项索引,没有选择则为-1,多选则返回第一个被选中的元素
size:选择框可见行数

option属性

index:当前选项在options集合中的索引
label:当前选项的标签
selected:是否被选中
text:选项的文本
value:选项的值
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 表单基础知识 在HTML中,表单是由 元素来表示的,而在JS中,表单对应的则是HTMLFormElement类型。...
    oWSQo阅读 4,406评论 0 1
  • 本人做php的,最近发现JS真的是博大精深啊,比PHP难.在HTML中,表单是由form元素来表示的,但是在jav...
    linfree阅读 6,673评论 3 17
  • 14.1 表单的基础知识 表单由 元素来表示,继承自HTMLElement类型,除具有HTML元素相同的默认属性外...
    Elevens_regret阅读 2,905评论 0 0
  • 本章内容 理解表单 文本框验证与交互 使用其他表单控制 14.1 表单的基础知识 通过document.forms...
    闷油瓶小张阅读 2,849评论 0 0
  • 表单基础知识 在HTML中,表单是使用form元素来表示的,JS中对应的是HTMLFormElement类型。它同...
    More_5897阅读 2,801评论 0 1

友情链接更多精彩内容