html 前台通用表单

<!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 前台通用表单,布布扣,bubuko.com

时间: 2024-08-26 14:40:34

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

MVC5传值问题:后台接收前台的传值(前台通过表单提交)

前台传递:<form action="/Home/Test" method="post"> <label>用户名</label><input type="text" name="username" /> <label>密码</label><input type="text" name="password" /&

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

模还是必须宝航连个基本方法,还有部分label标签映射为汉字: <?php /* * 用户模型 * */ class user extends CActiveRecord{ //获得数据模型 public static function model($classname = __CLASS__){ return parent::model($classname); } //定义数据表名字 public function tableName(){ return "{{user}}"

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

模还是必须定义两个基本方法.还有部分label标签映射为汉字,假设进行表单验证,还要定义一些验证规则: <? php /* * 用户模型 * */ class user extends CActiveRecord{ //获得数据模型 public static function model($classname = __CLASS__){ return parent::model($classname); } //定义数据表名字 public function tableName(){ retu

dedecms(织梦)自定义表单后台显示不全

我们常用dedecms 自定义表单做留言功能.但是偶尔会遇到这样一个问题,就是 在前台提交表单后..后天显示不全.特别是中文字符  都不会显示, 比如下图: 这是因为  如果你织梦是gbk的话那就对了 是htmlspecialchars这个函数的原因 默认是utf8 如果不想换php版本的话就把htmlspecialchars($str);替换为htmlspecialchars($str, ENT_COMPAT ,'GB2312'); 所以 要在后台模板 wwww.baidu.com/dede/

表单美化插件

Form Effect - 表单美化插件 一个jQuery样式插件,帮助你对表单中的控件进行式样控制. 1)Formly这个基于jQuery的表单美化插件,并带有表单校验功能. http://thrivingkings.com/formly/ 2)jQuery Tags Input这个jQuery插件能够将一个简单的文本输入转换成一个漂亮的Tag列表. http://xoxco.com/clickable/jquery-tags-input 演示地址: http://xoxco.com/clic

[学习笔记]--Jfinal 表单提交附件

最近,项目里面用到了Jfinal 里面的上传附件.Jfinal 的Controller 里面提供了一个 getFile系列方法提供文件上传. 我这里呢,是文件上传和表单参数一起提交.页面类似下图: 这里form表单里面使用了 enctype="multipart/form-data" .先看看Jfinal手册的说明吧!大家看了就知道了 然后还有个问题 如果是表单提交 还不可以用ajax 提交,具体的原因呢也找到了 http://www.oschina.net/question/9410

activiti自己定义流程之自己定义表单(二):创建表单

注:环境配置:activiti自己定义流程之自己定义表单(一):环境配置 在上一节自己定义表单环境搭建好以后,我就正式開始尝试自己创建表单,在后台的处理就比較常规,主要是针对ueditor插件的功能在前端进行改动. 因为自己的前端相关技术太渣.因此好多东西都不会用,导致改动实现的过程也是破费了一番功夫.头皮发麻了好几天. 既然是用别人的插件进行改动,那么我想假设仅仅是单独的贴出我改动后的代码,可能没有前后进行对照好理解,因此这里就把原代码和改动后的同一时候对照着贴出,以便于朋友们能从对照中更快的

phpcms v9 的表单向导功能的使用方法

本文主要介绍phpcms v9的表单向导功能是如何使用的,并副多个案例讲解: 先介绍一下v9 的表单向导如何使用 表单向导做的很实用,生成一个表单,常用的是把它作为一个留言板,或者在招聘栏目作为一个供网友填写个人信息的应聘表. 对于表单,默认的模板放在./phpcms/templates/default/formguide/.文件夹里面有三个文件index.html前台的表单列表,show.html单个表单展示,show_js.html表单插件; 表单作为一个功能性模块,往往是作为一个插件嵌入到

【jQuery】利用表单的序列化根据name取表单,做表单的验证

在前台做表单的验证的方式有很多种,具体思想是你先要把表单的要验证项里面的值取出来,然后再脚本处进行判断,最后根据判断结果告警,然后给onsubmit="return XX()"那个函数,返回true与false的布尔值.整个过程,把表单的要验证项取出来是关键.在<[JavaScript]表单即时验证,不成功不让提交>(点击打开链接)中利用了id取每一个表单项的属性,这是最基础的,但是如果需要以name的方法取出表单的项呢?此时,你可以利用jQuery的序列化,根据name来