关于提交表单的HTML小程序

最新推荐文章于 2024-03-25 16:03:00 发布
最新推荐文章于 2024-03-25 16:03:00 发布
阅读量1.1k 收藏
点赞数
文章标签： html class input 电话 function button
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Dannyoung/article/details/6932787
版权

微笑一个注册页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head><script language="javascript" type="text/javascript">
function do_selected()
{
	var yourchoise="";
	for(var i=0;i<form1.subject.length;i++)
	{
		if(form1.subject.options[i].selected)
		{
			yourchoise +=form1.subject[i].value+";";
		}
	}
	return yourchoise;
}
function do_checked()
{
	var yourchoise="";
	for(var i=0;i<form1.address.length;i++)
	{
		if(form1.address[i].checked) 
		{
			yourchoise+=form1.address[i].value+";";
		}
	}
	return yourchoise;
}

function win_open()
{
		
        msg=window.open("","DisplayWindow","toolbar=no,directories=no,resizable=yes,menubar=no");
		msg.document.write("姓名:");
		msg.document.write(form1.name.value+"<br>");
		msg.document.write("性别:");
		msg.document.write(form1.sex.value+"<br>");
		msg.document.write("Email邮件:");
		msg.document.write(form1.email.value+"<br>");
		msg.document.write("电话:");
		msg.document.write(form1.tel.value+"<br>");
		msg.document.write("所在班级:");
		msg.document.write(form1.inclass.value+"<br>");
		msg.document.write("QQ号码:");
		msg.document.write(form1.qq.value+"<br>");
		msg.document.write("入学年份:");
		msg.document.write(form1.year.value+"<br>");
		msg.document.write("选修科目:");
		msg.document.write(do_selected());
		msg.document.write("<br>");
		msg.document.write("个人简介:");
		msg.document.write(form1.instruction.value+"<br>");
		msg.document.write("上网地点:");
		msg.document.write(do_checked());
		msg.document.write("<br>");

}

function mycheck()
{
	if(document.form1.name.value=="")
	{
		alert("请输入姓名");
		document.form1.name.focus();
		return false;
	}
	if(document.form1.sex.value=="未指定")
	{
		alert("请指明性别");
		document.form1.sex.focus();
		return false;
	}
	if(document.form1.email.value.indexOf("@")==-1||document.form1.email.value.indexOf(".")==-1)
	{
		alert("邮箱格式不正确，请重新输入!");
		document.form1.email.focus();
		return false;
	}
	if(document.form1.tel.value.length != 8)
	{
		alert("电话号码必须是八位数，您目前输入的电话号码为"+document.form1.tel.value.length+"位");
		document.form1.tel.focus();
		return false;
	}
	if(parseInt(document.form1.tel.value).toString() != document.form1.tel.value)
	{
		alert("电话号码必须是八位数字，您目前输入的号码含有非数字字符，请输入正确的号码");
		document.form1.tel.focus();
		return false;
	}
	if(do_selected()=="")
	{
		alert("请至少选择一门课");
		document.form1.subject.focus();
		return false;
	}
	win_open();
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
.STYLE1 {color: #FF0000}
-->
</style>
</head>

<body>
<form id="form1" name="form1" method="post" action="" οnsubmit="return mycheck()">
  <table width="570" border="0" align="center">
    <tr>
      <td colspan="2"><hr width="95%" size="1" color="#FF0000"></td>
    </tr>
    <tr>
      <td width="217"><div align="right">姓名:<span class="STYLE1">*</span></div></td>
      <td width="343"><input type="text" name="name" id="name" value="" style=width:165pt; maxlength="50"/></td>
    </tr>
    <tr>
      <td><div align="right">性别:<span class="STYLE1">*</span></div></td>
      <td><select name="sex" id="sex" value="" style=width:165pt; maxlength="50">
        <option value="未指定">未指定</option>
        <option value="男">男</option>
        <option value="女">女</option>
      </select>      </td>
    </tr>
    <tr>
      <td><div align="right">Email邮件:<span class="STYLE1">*</span></div></td>
      <td><input type="text" name="email" id="email" value="" style=width:165pt; maxlength="50"/></td>
    </tr>
    <tr>
      <td><div align="right">电话:<span class="STYLE1">*</span></div></td>
      <td><input type="text" name="tel" id="tel" value="" style=width:165pt; maxlength="50"/></td>
    </tr>
    <tr>
      <td><div align="right">所在班级:</div></td>
      <td><input type="text" name="inclass" id="inclass" value="" style=width:165pt; maxlength="50"/></td>
    </tr>
    <tr>
      <td><div align="right">QQ号码:</div></td>
      <td><input type="text" name="qq" id="qq" value="" style=width:165pt; maxlength="50"/></td>
    </tr>
    <tr>
      <td><div align="right">入学年份:</div></td>
      <td><select name="year" id="year" value="" style=width:165pt; maxlength="50">
        <option value="2004">2004</option>
        <option value="2000">2000</option>
        <option value="2001">2001</option>
        <option value="2002">2002</option>
        <option value="2003">2003</option>
        <option value="2005">2005</option>
        <option value="2006">2006</option>
        <option value="2007">2007</option>
        <option value="2008">2008</option>
        <option value="2009">2009</option>
        <option value="2010">2010</option>
        <option value="2011">2011</option>
      </select>      </td>
    </tr>
    <tr>
      <td colspan="2"><hr width="95%" size="1" color="#FF0000"></td>
    </tr>
    <tr>
      <td><p align="right">选修科目:<span class="STYLE1">*</span></p>
      <p align="right">（可多选）</p></td>
      <td><select name="subject" size="4" multiple="multiple" id="subject" value="" style=width:165pt; maxlength="50">
        <option value="1">Java程序设计</option>
        <option value="2">数据结构</option>
        <option value="3">操作系统</option>
        <option value="4">微机原理</option>
        <option value="5">计算机组成原理</option>
        <option value="6">计算机网络</option>
      </select></td>
    </tr>
    <tr>
      <td><p align="right">个人简介:</p>
      <p align="right">（不多于500字）</p></td>
      <td><textarea name="instruction" rows="5" id="instruction" value="" style=width:165pt; maxlength="50"></textarea></td>
    </tr>
    <tr>
      <td><div align="right">上网地点:</div></td>
      <td><input type="checkbox" name="address" id="address" value="宿舍">
宿舍
  <input type="checkbox" name="address" id="address" value="网吧">
网吧
<input type="checkbox" name="address" id="address" value="机房">
机房</td>
    </tr>
    <tr>
      <td colspan="2"><hr width="95%" size="1" color="#FF0000"></td>
    </tr>
    <tr>
      <td><div align="right">
        <input type="submit" name="Submit" value="提交"/>
      </div></td>
      <td><input type="reset" name="button2" id="button2" value="重置" /></td>
    </tr>
  </table>
</form>
</body>
</html>


 

Dannyoung
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
小程序表单提交
May_Chiong的博客
06-05 647
小程序表单提交input组件checkbox设计模式的类型结构型模式行为型模式创建型模式策略模式 input组件 需要借助bindinput事件来实现数据的双向绑定： checkbox 设计模式的类型 结构型模式 行为型模式 涉及改善不同对象之间的通信，观察者模式 创建型模式 用于处理对象创建机制，单例模式 策略模式 定义了一系列的算法，并以一种可以在互换的方式封装他们，而不需要其他的干涉。 新建validator.js，验证 使用： 验证手机号不能为空： ...
VSCode 开发Vue必备插件
2301_78416672的博客
05-06 541
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
HTML小程序
小天狼星_布莱克 的博客
03-02 592
这里向大家分享一些HTML的小程序！
微信小程序开发：必须掌握的 HTML、CSS 和 JavaScript 技术
热门推荐
陈橘又青的博客
07-13 1万+
在小程序开发过程中，掌握HTML、CSS和JavaScript的基础知识和技术应用，不仅能构建出功能完善、界面美观的小程序应用，也为更深入的小程序开发和扩展打下了坚实的基础。1️⃣HTML、CSS和JavaScript在小程序开发中的重要性和应用价值HTML、CSS和JavaScript是构建小程序的核心技术，它们在小程序开发中扮演着重要的角色和作用。通过HTML构建小程序页面结构，CSS设置页面样式，JavaScript实现交互逻辑和动态效果，可以创造出更丰富、交互性更强的小程序应用。2️⃣。
document.forms用法
魔拉宝
01-29 1021
1、FF中不能接受document.forms("formname")的使用，ie中可以        最好改成document.forms["formname"]的下标用法2、FF中不能接受document.all的用法，document.all是在ie中定义的用法        最好改成document.getElementById3、FF中不能直接使用div的id获取div的
如何跟女朋友解释“W3CShool”之001
zljiaa的博客
08-14 430
HTML是使用标记标签来描述网页的一种标记语言。 HTML文档=网页，web浏览器的作用是读取HTML文档并且以网页的形式来显示它。浏览器不会显示标签，而是使用标签来解释页面的内容。 &lt;html&gt; 与 &lt;/html&gt; 之间的文本描述网页 &lt;body&gt; 与 &lt;/body&gt; 之间的文本是可见的页面内容 &lt;h1&gt; 与 &lt;/h1&g...
微信小程序-form表单提交代码实例
10-17
微信小程序的form表单提交是小程序开发中一个常见的功能，它允许用户在小程序内输入数据，并将数据提交到服务器进行处理。微信小程序提供了简单的接口来实现表单的数据收集与提交。本文将详细解析微信小程序中的form...
微信小程序的表单验证
12-08
微信小程序是一种轻量级的应用开发平台，主要用于构建移动端的应用，其设计简洁且功能强大。在微信小程序中，用户交互往往涉及到表单填写，因此表单验证成为了一个关键环节，确保用户输入的数据符合预设规则，避免...
美容预约-微信小程序-html
最新发布
05-27
例如，JavaScript可以监听表单提交事件，验证用户输入，调用微信小程序的网络请求接口发送预约请求到服务器，并处理返回的响应数据。 五、微信小程序生命周期管理 每个微信小程序页面都有其特定的生命周期，包括...
健身房预约课程小程序-html
05-23
【API集成】：小程序可能需要与后端服务器进行数据交换，例如查询课程信息、提交预约请求等。这通常涉及到使用HTTP/HTTPS协议的API接口，通过JavaScript发送AJAX（异步JavaScript和XML）请求。 【数据库连接】：...
HTML基于框架的小程序
05-23
这是web前端课上的一次小作业，使用了框架的基本结构，外加一些小特效，如雪花飞舞，烟花之类的，做得比较次，因为需要积分下载东西，所以大家将就着看
微信小程序开发表格demo
03-08
小程序开发表格demo，### wx:for在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item
砸金蛋小程序 HTML5
03-30
HTML5 + JS 砸金蛋小程序, 非常的使用，欢迎下载
html小程序
04-26
前端html5小程序，关于css的内联样式和内部样式，关于内联样式和内部样式的区别,和各类文本属性的区分和用法
简单的html小程序
06-12
一个简单的html小程序，用到了框架，模板
微信小程序 PHP后端form表单提交实例详解
01-19
微信小程序 PHP后端form表单 1.小程序相对于之前的WEB+PHP建站来说，个人理解为只是将web放到了微信端，用小程序固定的格式前前端进行布局、事件触发和数据的输送和读取，服务器端可以用任何后端语言写，但是所有的...
一个简单的随机点名器。
第一千行代码的博客
03-25 3673
//实现思路： 弄两个函数，一个开始函数，一个停止函数。。 点击开始按钮的时候，开始随机筛选。 点击结束按钮的时候。结束筛选。 清除定时器。 用到的知识点：数组，随机数，setinterval,clearinterval,点击事件函数<!DOCTYPE html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8">
html做成小程序,微信小程序——简单静态网页的制作
weixin_33973572的博客
05-30 5728
一、前言需要知识：HTMLCSS注意：微信小程序的语法与HTML和CSS不太相同，但本质是一样的。要求：进入开发者工具并且创建一个测试小程序， 选择建立快速模板在pages目录底下新建一个first的文件夹，其中包括指定的四个文件，并且设置第一个页面为first页面3.在first.wxml里制作如图ui界面，采用盒模型以及flex布局4.用户头像和待付款等四个圆圈统一用黑色的圆圈表示5.用户id...
微信小程序和传统html页面的区别
sodakii的博客
03-25 598
微信小程序和传统的基于HTML的网页开发在设计理念、开发环境、运行环境以及用户体验方面有着显著的区别。
HTML制作登陆小程序（1.0）
wlp1484735615的博客
01-12 554
html登陆小程序
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值