Html表单使用实例
原文
https://www.jianshu.com/p/b01f32844ac1
大纲
1、单选框多选框实现的商品选择
2、添加下拉框和删除下拉框
3、观察textarea中事件处理器的运行顺序
推荐
1、单选框多选框实现的商品选择
<html>
<head>
<title>Test</title>
<script>
var radCpuSpeedIndex = 0;
function radCPUSpeed_onclick(radIndex) {
var returnValue = true;
if (radIndex == 1) {
returnValue = false;
alert("Sorry that processor speed is currently unavailable");
/**
Next line works around a bug in IE that doesn't cancel
the Default action properly
*/
document.form1.radCPUSpeed[radCpuSpeedIndex].checked = true;
} else {
radCpuSpeedIndex = radIndex;
}
return returnValue;
} function butCheck_onclick() {
var controlIndex;
var element;
var numberOfControls = document.form1.length;
var compSpec = "Your chosen processor speed is ";
compSpec =
compSpec + document.form1.radCPUSpeed[radCpuSpeedIndex].value;
compSpec =
compSpec + "\nWith the following additional components\n";
for (controlIndex = 0; controlIndex < numberOfControls; controlIndex++) {
element = document.form1[controlIndex];
if (element.type == "checkbox") {
if (element.checked == true) {
compSpec = compSpec + element.value + "\n";
}
}
}
alert(compSpec);
}
</script>
</head>
<body>
<form name="form1">
<p>Tick all of the components you want included on your computer </p>
<br>
<br>
<table>
<tr>
<td>DVD-ROM</td>
<td>
<input type="checkbox" name="cnkDVD" value="DVD-ROM">
</td>
</tr>
<tr>
<td>CD-ROM</td>
<td>
<input type="checkbox" name="cnkCD" value="CD-ROM">
</td>
</tr>
<tr>
<td>ZIP-ROM</td>
<td>
<input type="checkbox" name="cnkZIP" value="ZIP DRIVE">
</td>
</tr>
</table>
<p>Select the processor speed you require </p>
<br>
<br>
<table>
<tr>
<td>
<input type="radio" name="radCPUSpeed" checked onclick="return radCPUSpeed_onclick(0)" value="3.8 GHz">
</td>
<td>3.8 GHz</td>
</tr>
<tr>
<td>
<input type="radio" name="radCPUSpeed" checked onclick="return radCPUSpeed_onclick(1)" value="4.8 GHz">
</td>
<td>4.8 GHz</td>
</tr>
<tr>
<td>
<input type="radio" name="radCPUSpeed" checked onclick="return radCPUSpeed_onclick(2)" value="6 GHz">
</td>
<td>6 GHz</td>
</tr>
</table>
<input type="button" value="Check Form" name="butCheck" onclick="return butCheck_onclick()">
</form>
</body>
</html>
2、添加下拉框和删除下拉框
<html>
<head>
<title>Test</title>
<script>
function butRemoveWeb_onclick(){
if(document.form1.theDay.options[2].text == "Wednesday"){
document.form1.theDay.options[2] = null;
}else{
alert("There is no Wednesday here!");
}
console.log(document.form1.theDay.selectedIndex);
}
function butAddWed_onclick(){
if(document.form1.theDay.options[2].text != "Wednesday"){
var indexCounter ;
var days = document.form1.theDay;
var lastoption = new Option();
days.options[6] = lastoption;
for(indexCounter = 6;indexCounter >2; indexCounter--){
days.options[indexCounter].text = days.options[indexCounter -1].text;
days.options[indexCounter].value = days.options[indexCounter -1].value;
}
var option = new Option("Wednesday",2);
days.options[2] = option;
}
else{
alert("Do you want to have TWO Wednesday????");
}
console.log(document.form1.theDay.selectedIndex);
}
</script>
</head>
<body>
<form name="form1">
<select name=theDay size=5>
<option value=0 selected>Monday
<option value=1>Tuesday
<option value=2>Wednesday
<option value=3>Thursday
<option value=4>Friday
<option value=5>Saturday
<option value=6>Sunday
</select>
<br>
<input type="button" value="Remove Wednesday" name=butRemoveWeb onclick="butRemoveWeb_onclick()">
<input type="button" value="Add Wednesday" name=butAddWeb onclick="butAddWed_onclick()">
</form>
</body>
</html>
3、观察textarea中事件处理器的运行顺序
<html>
<head>
<title>Test</title>
<script>
//观察textarea中事件处理器的运行顺序
function DisplayEvent(eventName){
var myMessage = window.document.form1.textarea2.value;
myMessage = myMessage + eventName;
window.document.form1.textarea2.value = myMessage;
}
</script>
</head>
<body>
<form name="form1">
<textarea rows=15 cols=40 name=textarea1
onchange = "DisplayEvent('onchagen\n');"
onkeydown = "DisplayEvent('onkeydown\n');"
onkeypress = "DisplayEvent('onkeypress\n');"
onkeyup = "DisplayEvent('onkeyup\n\n');"
></textarea>
<textarea rows=15 cols=40 name=textarea2></textarea>
<br><br>
<input type="button" value="Clear Event TextArea"
name=button1 onclick="window.document.form1.textarea2.value=''"
>
</form>
</body>
</html>
推荐
在这里推荐两篇同样是我写的博客,一篇是详细的关于表单以及表单元素的知识点的文章Html表单元素及表单元素详解,还有一篇是我使用表单的过程中遇到的一些问题以及相应解释Html表单中遇到的问题,同样希望能对读者有所帮助。
Html表单使用实例的更多相关文章
- Bootstrap+PHP表单验证实例
简单实用的Bootstrap+PHP表单验证实例,非常适合初学者及js不熟悉者,还有ajax远程验证 js验证表单 1 $(document).ready(function() { 2 $('#def ...
- jQuery-easyui和validate表单验证实例
jQuery EasyUI 表单 - 表单验证插件validatebox 使用时需要向页面引入两个css文件如下: <link rel="stylesheet" href=& ...
- 034——VUE中表单控件处理之使用vue控制radio表单的实例操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jquery-4 完整表单验证实例
jquery-4 完整表单验证实例 一.总结 一句话总结:在form的jquery对象中返回false即可终止表单提交. 1.验证的显示错误消息如何布局? 开始时隐藏,出现错误后显示 10 .erro ...
- React 表单元素实例
代码实例: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=" ...
- HTML5 web Form表单验证实例
HTML5 web Form 的开发实例! index.html <!DOCTYPE html> <html> <head> <meta charset=&q ...
- 纯原生javascript下拉框表单美化实例教程
html的表单有很强大的功能,在web早期的时候,表单是页面向服务器发起通信的主要渠道.但有些表单元素的样式没办法通过添加css样式来达到满意的效果,而且不同的浏览器之间设置的样式还存在兼容问题,比如 ...
- JavaScript表单验证实例
1. 长度限制<script>function test(){if(document.a.b.value.length>50){alert("不能超过50个字符!" ...
- Yii 框架表单验证---实例
- angular表单验证实例----可用的代码
前段时间,公司做一个单页面,就是一个表单验证,早开始在菜鸟教程上关注了angular,所以下派上用场了 angular里面对于表单验证,设置了很多指令. 也就是说不用自己写一些逻辑,直接绑定指令就行. ...
随机推荐
- idea 生成方法注释的快捷键
我用的15,在keymap里搜索 Fix doc comment 给他一个快捷建.参考 http://www.oschina.net/question/179541_26961
- 小米开源文件管理器MiCodeFileExplorer-源码研究(3)-使用最多的工具类Util
Util.java,使用最广泛~代码中很多地方,都写了注释说明~基本不需要怎么解释了~ package net.micode.fileexplorer.util; import java.io.Fil ...
- C++中的纯虚函数
---恢复内容开始--- 在C++中的一种函数申明被称之为:纯虚函数(pure virtual function).它的申明格式如下 class CShape { public: ; }; 在什么情况 ...
- 聊聊高并发(二十八)解析java.util.concurrent各个组件(十) 理解ReentrantReadWriteLock可重入读-写锁
这篇讲讲ReentrantReadWriteLock可重入读写锁,它不仅是读写锁的实现,而且支持可重入性. 聊聊高并发(十五)实现一个简单的读-写锁(共享-排他锁) 这篇讲了怎样模拟一个读写锁. 可重 ...
- PHP 版本简单记录
PHP 版本简单记录 PHP 博物馆 http://museum.php.net/php5/ PHP 版本发布 https://secure.php.net/release ...
- actionBar-进入界面闪烁问题解决
问题分析: 主要是因为在开启一个应用的时候,当前界面并不是第一界面,在它之前,还有一个界面启动了,这个界面的唯一目的就是启动主界面,它目的不是显示.虽然如此,但是呢,这个界面的theme因为没有做统一 ...
- 洛谷P2660 zzc 种田
题目背景 可能以后 zzc就去种田了. 题目描述 田地是一个巨大的矩形,然而zzc 每次只能种一个正方形,而每种一个正方形时zzc所花的体力值是正方形的周长,种过的田不可以再种,zzc很懒还要节约体力 ...
- LINUX设备驱动程序笔记(三)字符设备驱动程序
<一>.主设备号和次设备号 对字符设备的訪问时通过文件系统内的设备名称进行的.那些设备名称简单称之为文件系统树的节点,它们通常位于/dev文件夹. 字符设备驱动程 ...
- 【iOS开发-29】解决方式:TabBar的图片不显示,仅仅显示灰色的正方形
(1)现象 tabbar上的图片变成一块正方形的灰色块块,原先的图片没有了. (2)原因 tabbar上的图片本质上不是一个图片.而是一个形状图片.系统对我们使用的图片也仅仅是把当中的形状" ...
- log4j的总结
概述 log4j是日志处理的框架,相当于.net中的log4net.因为之前在.net中学习过log4net.所以.在学习log4j上,感觉很的亲切.本篇博客主要是讲一个图,好了进入正题. log4j ...