<!doctype html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<script type="text/javascript">

	function validate() {

		if(loginform.username.value == ""){

			alert("账号不能为空！");

			return;

		}

		if(loginform.password.value == ""){

			alert("密码不能为空！");

			return;

		}

		loginform.submit();

	}

	</script>

</head>

<body>

	<form action="test" method="post" name="loginform">

		用户名：<input type="text" name="username"><br>

		密码： <input type="password" name="password"><br>

		性别：<input type="radio" name="sex" value="boy" checked="true">男

		<input type="radio" name="sex" value="girl">女<br>

		家乡：<select name="home">

			<option value="beijing">北京</option>

			<option value="shanghai">上海</option>

			<option value="guangdong">广东</option>

		</select><br>

		隐藏域：<input type="hidden" name="page"><br>

		个人信息：<textarea name="info" cols="30" rows="10"></textarea><br>

		爱好：<input type="checkbox" name="fav" value="sing">唱歌

		<input type="checkbox" name="fav" value="dance">跳舞

		<input type="checkbox" name="fav" value="ball">打球

		<input type="checkbox" name="fav" value="game">打游戏<br>

		<select name="hobby" multiple="true">

			<option value="sing">唱歌</option>

			<option value="dance">跳舞</option>

			<option value="ball">打球</option>

			<option value="game">打游戏</option>

		</select><br>

		号码1：<input type="text" name="phone"><br>

		号码2：<input type="text" name="phone"><br>

		号码3：<input type="text" name="phone"><br>

		号码4：<input type="text" name="phone"><br>

		号码5：<input type="text" name="phone"><br>

		<input type="submit" value="查询">

		<input type="button" value="验证查询" onclick="validate()">

	</form>

</body>

</html>

效果图例如以下：

html 前台通用表单的更多相关文章

  1. JS通用表单验证函数,基于javascript正则表达式

    表单的验证在实际的开发当中是件很烦琐又无趣的事情今天在做一个小项目的时候,需要JS验证,寻找到一个比较好的东西 地址如下: http://blog.csdn.net/goodfunman/archiv ...

  2. JFinal极速开发实战-业务功能开发-通用表单验证器

    提交表单数据时,需要经过前端的验证才能提交到后台,而后台的验证器再做一道数据的校验,成功之后才能进入action进行业务数据的处理. 在表单数据的验证中,数据类型的验证还是比较固定的.首先是对录入数据 ...

  3. 移动端H5通用表单验证插件

    将表单验证的通用部分提炼出来,做成一个简易插件,方便调用. 已将源码放到GitHub上,名字叫zValidate. 手机可扫描下图查看示例,PC端可点击此处查看: 一.原理 1)需要引入zepto.j ...

  4. element-ui 通用表单封装及VUE JSX应用

    一.存在及需要解决的问题 一般在做后台OA的时候会发现表单重复代码比较多,且逻辑基本一样,每次新加一个表单都需要拷贝基本一致的代码结构,然后只是简单地修改对应的字段进行开发 二.预期结果 提取重复的表 ...

  5. jQuery 通用表单方法

    表单验证一直是一个麻烦的事情,让很多人望而退步,之前想过一个验证的好方法,但是有bug,昨晚请教了juyling.com的王员外,顺利解决. 以下是js代码     function mySubmit ...

  6. YII用户注冊表单的实现熟悉前台各个表单元素操作方式

    模还是必须定义两个基本方法.还有部分label标签映射为汉字,假设进行表单验证,还要定义一些验证规则: <? php /* * 用户模型 * */ class user extends CAct ...

  7. weiphp 插件"通用表单"BUG修改

    修改文件目录 在类FormsValueController 中添加函数 // 匹配函数 //$value:字符串 //$validate_rule:正则规则 // return true:比配成功,f ...

  8. JS自定义表单提交处理方案

    JS自定义数据提交处理方案 问题 在Ajax技术流行的今天,我遇到了一个很头疼的问题,我需要维护一个前人开发的问题单模块功能,并且不停的迭代开发,而这个问题就是问题单字段特别多,而且除了更新问题单外, ...

  9. Validform表单验证总结

    近期项目里用到了表单的验证,选择了Validform_v5.3.2. 先来了解一下一些基本的参数: 通用表单验证方法:Demo: $(".demoform").Validform( ...

随机推荐

  1. noip2000提高组题解

    事实再次向我证明了RP的重要性... 第一题:进制转换 是我最没有把握AC的一道题目却是我唯一一道AC的题目,真是讽刺.看完题目几乎完全没有往正常的解法(取余倒序)去想,直接写了搜索,因为数据范围在2 ...

  2. T-SQL查询进阶-10分钟理解游标

    转:http://www.cnblogs.com/CareySon/archive/2011/11/01/2231381.html 概述 游标是邪恶的! 在关系数据库中,我们对于查询的思考是面向集合的 ...

  3. iOS-利用AFNetworking（AFN 1.x)-实现文件断点下载

    转:http://www.kaifazhe.com/ios_school/380066.html 官方建议AFN的使用方法 1. 定义一个全局的AFHttpClient:包含有 1> baseU ...

  4. Android-根据ImageView的大小来压缩Bitmap，避免OOM

    本文转自:http://www.cnblogs.com/tianzhijiexian/p/4254110.html Bitmap是引起OOM的罪魁祸首之一,当我们从网络上下载图片的时候无法知道网络图片 ...

  5. Android-AnimationDrawable（二）

    首先可以先定义一个逐帧播放的xml: <?xml version="1.0" encoding="utf-8"?> <animation-li ...

  6. Spring分布式事务实现

    分布式事务是指操作多个数据库之间的事务,spring的org.springframework.transaction.jta.JtaTransactionManager,提供了分布式事务支持.如果使用 ...

  7. Android 翻页效果 电子书

    转载请注明来自: 5进制空间-android区 相信做电子书的同学,都遇到过翻页动画的需求吧,如果你不满足与点击滑动翻页的话,这边文章应该能够帮助到你. 先上个效果图: 效果还是很不错的,不过与ibo ...

  8. 10、TV UI

     TV UI布局 1. 为大屏幕提供适当的布局源文件. 2. 确保UI在一定距离仍然可以看清. 3. 为高清电视提供高分辨率的图标和图像. 1. 把屏幕上的导航控制菜单放在屏幕的左边或者右边,并且将 ...

  9. HDU5739 Fantasia 树形dp + 点双缩点

    这个题当时打多校的时候有思路,但是代码能力差,没有写出来 事后看zimpha巨巨的题解,看了觉得基本差不多 核心思路:就是找出割点,然后变成森林,然后树形dp就可以搞了 关键就在重新构图上,缩完点以后 ...

  10. HDU 5727 Necklace 环排+二分图匹配

    这是从山东大学巨巨那里学来的做法 枚举下黑色球的排列总数是8!,然后八个白球可选的位置与左右两个黑球存不存在关系建图就行 这是原话,具体一点,每次生成环排,只有互不影响的才连边 最后:注重一点,n个数 ...