HTML中表单form的相关知识说明

高洛峰

发布时间：2017-03-08 15:55:20

1290人浏览过

来源于php中文网

原创

在javascript 中，页面上的每一对

标记都解析为一个对象，即form 对象。

可以通过document.forms 获取以源顺序排列的文档中所有form 对象的集合。

如果一个表单对象定义如下：

获得该表单对象的方法：

i> document.forms["frm1"]; // 根据name属性值

ii> document.forms[0]; // 根据索引号

iii> document.frm1; // 直接根据name值获得对象

企业建站系统2.0

系统是针对于企业用户量身打造的一款简单的程序，只要你懂一点html语言你就可以轻轻松松的创建一个自己的企业官网，品牌官网、为了更好的让各位开发者可以简单的制作自己满意的模板，我们官网论坛提供了模板变量(模板标签)可以让大家轻松制作自己的企业官网。更新说明：修复专题页面添加产品不显示问题功能列表：1.设置中心2.分类栏目3.关于我们4.联系我们5.招聘中心6.留言方式7.支持伪静态8.支持生成静

下载

form 表单应该注意的属性：

elements：获取以源顺序排列的给定表单中所有控件的集合。但是对象不在此集合内。

立即学习“前端免费学习笔记（深入）”；

var txtName = myform.elements[0]; //获得表单的第一个元素

var txtName = myform.elements["txtName"]; //获得name属性值为"txtName"的元素

var txtName = myform.elements.txtName; //获得name属性值为"txtName"的元素

enctype：设置或获取表单的多用途网际邮件扩展(MIME) 编码。

这个属性的默认值为：application/x-www-form-urlencoded

如果要上传文件，则应该设置为：multipart/form-data

form 表单中的标记：

每一个表单元素的文字描述都应该使用标记！

该标记用于将文字绑定到对应的表单元素上，它的for 属性指定它所要绑定的表单元素id 值。绑定后单击该文字，鼠标将聚焦到对应的文本框中或选中对应的选项。

若安装了某些桌面主题，某些表单元素还会变换颜色来予以提示，这大大提高了用户体验。

示例代码：

点我将聚焦到文本框

点我将选中单选框

点我将选中复选框

注意：

i > 每个表单元素应当尽量使用标签来提高用户体验；

ii > 每个表单元素应当分配 name 属性和 id 属性。

name 属性：用来将数据提交到服务器；

id 属性：用来在客户端做相应的操作；如：标签的绑定、CSS 选择器的使用等。

( name 属性和 id 属性应该尽可能地使用相同的或相关的值。)

在客户端，Javascript 对表单及表单元素的操作，更青睐于使用其name 属性。

因为，对于某些特定的表单元素(如：单选按钮等)，使用其name 属性更易于获得元素值，也更方便向服务器传送数据！

Javascript 操作form 表单元素，比较少用的属性：

defaultChecked 设置或获取复选框或单选钮的状态。
defaultValue 设置或获取对象的初始内容。
disabled 设置或获取控件的状态。

提交表单

提交表单的示例：

onclick="document.forms['frm'].submit();">

onclick="this.disabled=true; this.form.submit();">

注意：

i > 如果使用submit( ) 方法来提交表单，则不会触发

表单元素的onsubmit 事件，

这是与用提交元素不同的地方；

ii > 可以在按钮的提交或点击事件中，使用disabled 属性来禁用用户反复点击提交按钮的行为，

减少服务器的响应负担；

设置文本框

i > 控制文本框的字符个数

function LessThan(_textArea){

//返回文本框字符个数是否符号要求的boolean值

return _textArea.value.length

}

文本框:

多行文本框:

注意：多行文本框中的maxlength 为自定义属性；如果在<textarea> 中输入字符时，换行也算一个字符；

ii > 鼠标经过时，自动选中文本框

window.onload = function(){

var txtName = document.getElementsByName("myName")[0];

txtName.onmouseover = function(){

this.focus();

};

txtName.onfocus = function(){

this.select();

};

}

实现了行为与结构的分离。

设置单选按钮

获取选中的单选按钮 & 设置单选按钮被选中

//获取选中项

function getChoice(){

var oForm = document.forms["myForm1"];

//radioName是单选按钮的name属性值

var aChoices = oForm.radioName;

//遍历整个单选项表

for(i=0;i

if(aChoices[i].checked)

break; //如果发现了被选中项则退出

alert("您选中的是："+aChoices[i].value);

}

//设置选中项

function setChoice(_num){

var oForm = document.forms["myForm1"];

//radioName是单选按钮的name属性值

oForm.radioName[_num].checked = true; //其它选项的checked值会自动设置为false

}

//调用代码

需要保证同一组单选按钮的name 属性值相同即可。

设置复选框

设置复选框的“全选”、“全不选”及“反选”功能

function changeBoxes(_action){

var myForm = document.forms["myForm1"];

//myCheckbox 为所有复选框的name属性值

var oCheckBox = myForm.myCheckbox;

for(var i=0;i

if(_action

oCheckBox[i].checked = !oCheckBox[i].checked;

else

//_action为1是则全选,为0时则全不选

oCheckBox[i].checked = _action;

}

设置下拉列表框

下拉列表框的multiple 属性用于设置或获取下拉列表框是否可以选中多个选项。

下拉列表框默认只能选中一项，若要设置为可以选中多项，则

type 属性：javascript 语言根据type 属性的值获得下拉列表框select 控件的类型。

type 属性的值为：select-multiple 或 select-one （注意：下拉列表框的类型由multiple 属性控制）

i > 查看下拉列表框的选项（单选项 & 多选项）

function getSelectValue(_myselect){

var oForm = document.forms["myForm1"];

//根据参数(下拉列表框的name属性值)获得下拉菜单项

var oSelectBox = oForm.elements[_myselect];

//判断是单选还是多选

if(oSelectBox.type == "select-one"){

var iChoice = oSelectBox.selectedIndex; //获取选中项

alert("单选，您选中了" + oSelectBox.options[iChoice].text);

}

else{

var aChoices = new Array();

//遍历整个下拉菜单

for(var i=0;i

if(oSelectBox.options[i].selected)//如果被选中

//压入到数组中

aChoices.push(oSelectBox.options[i].text);

//输出结果

alert("多选，您选了：" + aChoices.join());

}

ii > 添加下拉列表框的选项

追加新选项到末尾

function AddOption(Box){ //追加选项到末尾

var oForm = document.forms["myForm1"];

var oBox = oForm.elements[Box];

var oOption = new Option("乒乓球","Pingpang");

oBox.options[oBox.options.length] = oOption;

}

插入新选项到指定位置

function AddOption(_select,_num){

var oForm = document.forms["myForm1"];

var oBox = oForm.elements[_select];

var oOption = new Option("text值","value值");

//兼容IE7，先添加选项到最后，再移动

oBox.options[oBox.options.length] = oOption;

oBox.insertBefore(oOption,oBox.options[_num]);

}

注意：如果直接使用insertBefore( ) 方法插入选项，将会在IE 中出现一个空选项的bug。为了解决IE 的这个bug ，只能使用先追加新选项到末尾，然后再使用insertBefore( ) 方法将其移动到相应的位置。

类似这样：为了跳过浏览器的某些bug 或限制，实现预定目的的小技巧，通常称之为hack 。

iii > 替换某一选项

//替换选项

function ReplaceOption(_select,_num){

var oForm = document.forms["myForm1"];

var oBox = oForm.elements[_select];

var oOption = new Option("text值","value值");

oBox.options[_num] = oOption; //替换第_num 个选项

}

通过oBox.options[_num] = oOption 直接将创建的新选项替换掉指定位置的选项。

iv > 删除某一选项

function RemoveOption(_select,_num){

var oForm = document.forms["myForm1"];

var oBox = oForm.elements[_select];

oBox.options[_num] = null; //删除选项

}

......

直接通过oBox.options[_num] = null 删除选项。

2026好用的html编辑器推荐及排名十大常用html编辑器软件排行榜

html编辑器哪个软件好用 html编辑器有哪些

如何修复 Tailwind CSS 背景颜色不生效的问题？

React 组件命名规范：首字母大写才能正确渲染

如何解决 Tailwind CSS 背景颜色不生效的问题？

HTML速学教程(入门课程)

HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

下载

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：HTML解析原理说明下一篇：使用UserControl做HTML生成的技巧

作者最新文章

实现一个 Java 版的 Redis

2018-05-30 13:56

Asp.net使用SignalR实现发送图片

2018-05-28 16:22

HTML5:使用Canvas实时处理Video

2018-05-28 17:58

最简单的微信小程序Demo

2018-05-30 10:20

Python构造自定义方法来美化字典结构输出

2018-05-29 10:33

html设置加粗、倾斜、下划线、删除线等字体效果示例介绍

2018-05-31 09:48

微信小程序：如何实现tabs选项卡效果示例

2018-05-29 15:01

微信小程序开发教程-App()和Page()函数概述

2018-05-28 16:19

python中pandas.DataFrame（创建、索引、增添与删除）的简单操作方法介绍

2018-05-29 15:23

详解python redis使用方法

2018-05-28 15:01

热门AI工具

DeepSeek

幻方量化公司旗下的开源大模型平台

AI大模型

开放平台

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI大模型

通义千问

阿里巴巴推出的全能AI助手

AI大模型

腾讯元宝

腾讯混元平台推出的AI助手

文档处理

Excel 表格

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI大模型

中文写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

中文写作

写作工具

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接

图画生成

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI大模型

中文写作

智谱清言 - 免费全能的AI助手

AI大模型

PDF 文档