html 输入

最新推荐文章于 2025-01-21 16:50:52 发布
最新推荐文章于 2025-01-21 16:50:52 发布
阅读量754 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： javascript 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u012635819/article/details/17628981 
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>预订装修</title> 
    
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=device-width,height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="format-detection" content="telephone=no">
<%-- 	<script type="text/javascript" src="<%=basePath%>js/plugback.js"></script> --%>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
	<%-- <script src="<%=basePath%>js/alert.js"></script> --%>
	
	<link rel="stylesheet" type="text/css" href="style.css">
	
<script type="text/javascript">
	$(function(){
		window.onload = getRunTime();
		function getRunTime() {
			$.ajax({
				type : "POST",
				url : "ordersubTimes.action",
				success : function(data1){
					if(data1.success = true){
						var time = data1.times; 
						$("<option value=0>请输入到达时间</option>").appendTo($("#time"));
						var i = 0;
						while (i < time.length) {
							if (time[i] == null) {
								break;
							}
							var li = $("<option value="+time[i]+">" + time[i]
									+ "</option>");
							$(li).appendTo($("#time"));
							i++;
						}
					}
				}
			});
		};
		window.onload = getType();
		
		function getType(){
		$.ajax({
			type : "POST",
			url : "findDongType.action",
			success : function(data){
				var list = data.list;
				$("<option value=\"\">请选择装修类型</option>").appendTo($("#typefirst"));
				for(var i=0;i<list.length;i++){
					var li = "<option value=\""+list[i].id+"\">"+list[i].typeName+"</option>";
					$(li).appendTo($("#typefirst"));
				}
			}
		});
		};
		window.onload = getType1();
		function getType1(){
			$("#typefirst").live("change", function(){
				var aa = $("#typefirst").val();
				$.ajax({
					type : "POST",
					data : "typeId="+aa,
					url : "findDfRoomById.action",
					success : function(data1){
						var list1 = data1.list;
						$("#typeseconed").empty();
						$("<option value=\"\">请选择装修名称</option>").appendTo($("#typeseconed"));
						for(var i=0;i<list1.length;i++){
							var li = "<option value=\""+list1[i].id+"\">"+list1[i].name+"</option>";
							$(li).appendTo($("#typeseconed"));
						}
					}
					
				});
			});
		}
	});
		$(document).ready(function(){
			$("#showsubmit").click(function(){
				var  name1 = $("#truename").val();
				var name = encodeURIComponent(name1);
				var type1 = $("#typefirst").find("option:selected").text();
				var type = encodeURIComponent(type1);
				var nametype1 = $("#typeseconed").find("option:selected").text();
				var nametype = encodeURIComponent(nametype1);
				var  sex1 = $("#sex").val();
				var sex = encodeURIComponent(sex1);
				var  tel = $("#phone").val();
				var  orderTime = $("#time").val();
				var  content1 = $("#content").val();
				var content = encodeURIComponent(content1);
				if(name==''){
					alert('姓名不能为空！');
					return;
				};
				if(sex==''){
					alert('请选择性别！');
					return;
				};
				if(type == ''){
					alert('请选择类型');
					return;
				}
				if(nametype == ''){
					alert("请选择装修名称！");
					return;
				}
				if($("#phone").val()==''){
					alert('请输入你的联系方式！');
					return;
				};
				if($('#time').val()==''){
					alert('请输入到达时间！');
					return;
				};
				$.post("<%=basePath%>addSub.action?tel=" + tel+"&name="+name+"&type="+type+"&orderTime="+orderTime+"&sex="+sex+"&content="+content+"&nametype="+nametype, "", getResult);
			});
			//获得用户信息保存的结果
		function getResult(data) {
			if (data.success == true) {
				alert("预订成功，请保持手机畅通，我们会在5分钟之内与您联系！");
			} else {
				alert("提交失败，请重新申请!");
			}
			document.getElementById("truename").value="";
			document.getElementById("phone").value="";
			document.getElementById("time").value="";
			document.getElementById("content").value="";
			document.getElementById("showsubmit").disabled='disabled';
		}  
		});
		
		//验证联系方式
		function validTeleNum(){
			 var tel =/(^[0-9]{3,4}[0-9]{7,8}$)|(^[0-9]{7,8}$)|(^[0-9]{3,4}\-[0-9]{7,8}$)|(^[0-9]{7,8}$)|(^\([0-9]{3,4}\)[0-9]{3,8}$)|(^0{0,1}13[0-9]{9}$)/; 
			   if (document.getElementById("phone").value !='') { 
			    if(!tel.test(document.getElementById("phone").value)){    
			       alert("联系电话格式不正确,请重新输入!");
			       document.getElementById("phone").value ="";
			    }
			}
		}
	</script>
	<style type="text/css">
		.up_top_1 li h3 {
	border-bottom: 1px dotted #C6C6C6;
	font-weight: normal;
	padding: 10px 0;
	text-align: left;
}
.up_top_1 li {
	width: 90%;
	color: #720705;
	padding: 0 10px;
	list-style-type: none;
}
.up_top_2 {
	padding: 5px 5px;
	text-align: left;
}
#storeName{
	float: right;
}
.rig_r{
	float: right;
}
.sch_m_t{
	margin-top: 30px;
}
.sch_m_t a{
	color: #720705;
}
#schedu{
	margin-left: 5%;
	width: 95%;
	margin-top: 20px;
}
.textarea {
	position: relative;
	background-color: transparent;
	color: #999999;
	display: block;
	width: 100%;
	margin: 10px 0;
	padding: 0 10px;
	font-family: Arial, Helvetica, sans-serif;
	border: 0;
	overflow: auto;
	-webkit-appearance: none;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border: 1px solid #E8E8E8;
	margin: 5px 0 5px;
	padding: 5px 10px;
	height: 99px; 
	overflow-y: visible
}

.up_top_5 {
	position: relative;
	background-color: transparent;
	color: #6d0101;
	display: block;
	width: 100%;
	font-family: Arial, Helvetica, sans-serif;
	border: 0;
	-webkit-appearance: none;
}
.up_top_5[type="text"] {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	border-radius: 3px 3px 3px 3px;
	border: 1px solid #E8E8E8;
	padding: 5px 0;
	color: #6d0101;
}
.textarea[type="textarea"] {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	color: #6d0101;
}
.up_top_5 {
	margin: 5px 0 4px;
	border: 1px solid #E8E8E8;
}
.up_top_4 th {
	color: #720705;
	font-size: 16px;
	font-weight: normal;
	padding: 0;
	text-align: left;
	width: 79px;
}
.col{
	color: #720705;
}
.select {
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	background-color: #FFFFFF;
	border: 1px solid #E8E8E8;
	margin: 5px 0 4px;
	padding: 5px 0px;
	width: 100%;
	-webkit-appearance: button;
	-webkit-user-select: none;
	overflow: visible;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #6d0101;
	display: inline;
	position: relative;
	height: auto;
	outline: none;
	background-color: transparent;
}
.select_sel{
	width: 40px;
}
.select_sel_ma{
	margin-left: -30px;
	margin-right: 10px;
}
.submit[type="button"] {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	width: 100%;
}
.submit {
	background-color: #520202;
	padding: 10px 20px;
	text-decoration: none;
	border: 1px solid #360101;
	background-image: linear-gradient(bottom, #520202 0%, #780101 100%);
	background-image: -o-linear-gradient(bottom, #520202 0%, #780101 100%);
	background-image: -moz-linear-gradient(bottom, #520202 0%, #780101 100%);
	background-image: -webkit-linear-gradient(bottom, #520202 0%, #780101 100%);
	background-image: -ms-linear-gradient(bottom, #520202 0%, #780101 100%);
	background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #520202), color-stop(1, #780101));
	-webkit-box-shadow: 0 1px 0 #9d0606 inset, 0 1px 2px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0 1px 0 #9d0606 inset, 0 1px 2px rgba(0, 0, 0, 0.5);
	box-shadow: 0 1px 0 #9d0606 inset, 0 1px 2px rgba(0, 0, 0, 0.5);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
	color: #e9bf00;
	display: block;
	text-align: center;
	text-shadow: 0 1px rgba(0, 0, 0, 0.2);
}
.submit:active {
	padding-bottom: 9px;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 11px;
	top: 0px;
	background-image: linear-gradient(bottom, #780101 0%, #520202 100%);
	background-image: -o-linear-gradient(bottom, #780101 0%, #520202 100%);
	background-image: -moz-linear-gradient(bottom, #780101 0%, #520202 100%);
	background-image: -webkit-linear-gradient(bottom, #780101 0%, #520202 100%);
	background-image: -ms-linear-gradient(bottom, #780101 0%, #520202 100%);
	background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #780101), color-stop(1, #520202));
	-webkit-box-shadow: 0 1px 0 #780101 inset, 0 1px 2px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0 1px 0 #780101 inset, 0 1px 2px rgba(0, 0, 0, 0.5);
	box-shadow: 0 1px 0 #780101 inset, 0 1px 2px rgba(0, 0, 0, 0.5);
}
#foo_sub{
	margin-top: 30px;
	width: 30%; margin: auto;
}
.bod_def{
	background: url("<%=basePath%>images/bj_4.jpg");
	background-repeat:no-repeat;
	background-attachment: scroll;
	background-size:100% 100%; 
}
img{
	width: 100%;
}
	</style>
  </head>
  
  <body class="bod_def">
    <div class="up_top" style="width: 95%;margin: auto;position: relative;">
    	<!-- <ul class="up_top_1" style="margin-top: 20px;">
    		<li class="">
    			<h2>订单说明</h2>
    			<div class="up_top_2"><span id="shuoming"></span></div>
    		</li>
    	</ul> -->
    	
    	<ul class="up_top_1 up_top_2 sch_m_t">
			<li>
					<span>地址：世纪商贸城四区一栋10号</span>
			</li>
			<li>
				<a href="tel:8800-0666" style="text-decoration: none;">
					<span>预订电话:15076759985</span>  
				</a>
			</li>
		</ul>
    	
    	<ul class="up_top_1" style="">
    		<li class="up_top_3 li0" style="border-bottom:none;margin-bottom: -5px;">
    			<span>请认真填写表格</span>
    		</li>
    		<li class="li1" style="border-radius:0px 0px 0px 0px;border-top:none;">
    			<table class="up_top_4" width="100%; cellspacing="0" cellpadding="0" border="0">
    				<tbody>
    					<tr>
    						<th>联系人</th>
    						<td>
								<input id="truename" class="up_top_5" type="text" placeholder="请输入您的真实姓名" name="truename">
							</td>
    					</tr>
    				</tbody>
    			</table>
    		</li>
    		
    		<li class="li1" style="border-top: none;border-radius:0px 0px 0px 0px;">
    			<table class="up_top_4" width="100%; cellspacing="0" cellpadding="0" border="0">
    				<tbody>
    					<tr>
    						<th>性别</th>
    						<td>
								<select id="sex" class="select" name="sex">
									<option value="" selected="selected">请选择性别</option>
									<option value="男">男</option>
									<option value="女">女</option>
								</select>
							</td>
    					</tr>
    				</tbody>
    			</table>
    		</li>
    		
    		<li class="li1" style="border-top:none;border-radius:0px 0px 0px 0px;">
    			<table class="up_top_4" width="100%; cellspacing="0" cellpadding="0" border="0">
    				<tbody>
    					<tr>
    						<th>联系电话</th>
    						<td>
								<input id="phone" class="up_top_5" type="text" placeholder="请输入您的联系方式" name="truename" onblur="validTeleNum()">
							</td>
    					</tr>
    				</tbody>
    			</table>
    		</li>
    		<li class="li1" style="border-top: none;border-radius:0px 0px 0px 0px;">
    			<table class="up_top_4" width="100%; cellspacing="0" cellpadding="0" border="0">
    				<tbody>
    					<tr>
    						<th>装修类型</th>
    						<td>
								<select id="typefirst" class="select" name="type">
									<!-- <option value="" selected="selected">请选择装修类型</option>
									<option value="0">西湖</option>
									<option value="1">杭州</option> -->
								</select>
							</td>
    					</tr>
    				</tbody>
    			</table>
    		</li>
    		
    		<li class="li1" style="border-top: none;border-radius:0px 0px 0px 0px;">
    			<table class="up_top_4" width="100%; cellspacing="0" cellpadding="0" border="0">
    				<tbody>
    					<tr>
    						<th>装修名称</th>
    						<td>
								<select id="typeseconed" class="select" name="name">
									<!-- <option value="" selected="selected">请选择装修类型</option>
									<option value="0">西湖1</option>
									<option value="1">西湖2</option> -->
								</select>
							</td>
    					</tr>
    				</tbody>
    			</table>
    		</li>
    		
    		<li class="li1" style="border-top: none;border-radius:0px 0px 0px 0px;">
    			<table class="up_top_4" width="100%; cellspacing="0" cellpadding="0" border="0">
    				<tbody>
    					<tr>
    						<th>到店时间</th> 
    						<td>
								<select id="time" class="select" name="time">
									
								</select>
							</td>
    					</tr>
    				</tbody>
    			</table>
    		</li>
    		
    		<li class="li1" style="border-top: none;border-radius:0px 0px 3px 3px;">
    			<table class="up_top_4" width="100%" cellspacing="0" cellpadding="0" border="0">
    				<tbody>
    					<tr>
    						<th class="beizhu" valign="top" style="padding:10px 0 0 0;">备注</th>
    						<td>
    							<textarea style="color:#6d0101;" id="content" name="info" class="textarea" style=" height:99px;overflow-y:visible" id="beizhu" placeholder="请输入备注信息"></textarea>
							</td>
    					</tr>
    				</tbody>
    			</table>
    		</li>
    	</ul>
    <div class="up_button" style="width: 90%;margin: auto;">
    	<input id="showsubmit" class="submit" type="button" value="提交订单">
    </div>
    </div>
  </body>
</html>

使用HTML代码编写输入密码进入网页教程
克隆窝
12-17 2255
这里稍微注意一下，引号里面的内容是填写XX网站的网址，可以是你优快云个人主页，也可以是某音官网 等。网页源码下载地址(如需提取码，提取码为。
html成绩百分制转换为,设计一个程序，将从键盘上输入的百分制成绩转换成对应的五分制成绩并输出。90分以上为A，80~90分为B，...
weixin_34869021的博客
06-03 5495
设计一个程序，将从键盘上输入的百分制成绩转换成对应的五分制成绩并输出。90分以上为A，80~90分为B，以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！设计一个程序，将从键盘上输入的百分制成绩转换成对应的五分制成绩并输出。90分以上为A，80~90分为B，编码思路：申明两个变量: 成绩cj为 浮点数float 且 取值...
Html入门
山有木兮
06-09 1450
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、HTML是什么？二、使用步骤1.html文档基本结构2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、HTML是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.ht.
html自动打字代码,HTML快捷输入代码
weixin_39681621的博客
05-31 883
Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具:Emmet 把片段这个概念提高到了一个新的层次：你可以设置 CSS 形式的能够动态被解析的表达式，然后根据你所输入的缩写来得到相应的内容。Emmet 是很成熟的并且非常适用于编写 HTML/XML 和 CSS 代码的前端开发人员，但也可以用于编程语言。在 VSCode 使用在 VSCode 编辑器中新建一个文件...
html 输入类型,HTML 输入类型(示例代码)
weixin_39998521的博客
06-05 351
输入类型：text定义供文本输入的单行输入字段：实例输入类型：password定义密码字段：只有使用了type="password"，密码才能看不到。实例输入类型：submit定义提交表单数据至表单处理程序的按钮。表单处理程序(form-handler)通常是包含处理输入数据的脚本的服务器页面。如果您省略了提交按钮的 value 属性，那么该按钮将获得默认文本在表单的 action 属性中规...
【HTML】html纯常用代码
2301_79585673的博客
09-05 1万+
html代码大全
html 表单标签+输入框的讲解与代码
2301_81325634的博客
09-23 1496
一. 表单标签 二. 输入标签(文本框) 三. 作业（表格样式+表单按钮样式）
html限定输入的内容,HTML中限制input 输入框输入内容
weixin_34312809的博客
06-08 1930
限制 input 输入框只能输入纯数字1、onkeyup = "value=value.replace(/[^\d]/g,'')"使用 onkeyup 事件，有 bug ，那就是在中文输入法状态下，输入汉字之后直接回车，会直接输入字母2、onchange = "value=value.replace(/[^\d]/g,'')"使用 onchange 事件，在输入内容后，只有 input 丧失焦点时...
弹窗密码输入（HTML）
qq_46201532的博客
08-21 2001
弹窗密码输入，密码输入成功才可以访问 <html> <head> <meta charset="UTF-8"> <title>验证密码</title> </head> <body> <script> var pwd, pwdAgain; do { pwd = prompt("请输入密码"); } whi
html select 可输入 可编辑
06-18
然而，标准的`<select>`元素并不支持用户直接输入自定义文本。为了实现一个既可输入又可编辑的下拉框效果，开发者通常会采用一些技巧来模拟这种行为。这里，我们将深入探讨如何通过HTML、CSS和JavaScript技术来实现...
HTML学习笔记之常见表单和输入示例（五）
wz_1992的博客
03-25 635
5、常见表单和输入示例 使用form+input标签 F:\Html\MyHtmls1\normalKongJian\html_formandinput.html 5.1 文本域 type=“text” <html> <body> <!--文本域 --> <h4>文本域：</h4> <form> 名： <input type="text" name="firstname"></input> <br
HTML 表单和输入标签详解
最新发布
weixin_45474825的博客
01-21 1060
HTML 表单使用 <form> 标签定义，表单中可以包含各种输入元素，例如文本框、密码框、单选按钮、复选框、下拉列表等
html语言代码 输入文字,html语言教程文字代码：
weixin_28840811的博客
05-30 5025
html语言教程文字代码：一、一般的文字代码：欢迎您来到HTML代码交流部落二、文字向左移动代码：欢迎您来到HTML代码交流部落三、文字向上滚动代码：欢迎您来到HTML代码交流部落四、文字向下滚动代码：欢迎您来到HTML代码交流部落代码：一、一般的文字代码：欢迎您来到HTML代码交流部落二、文字向左移动代码：欢迎您来到HTML代码交流部落三、文字向上滚动代码：欢迎您来到HTML代码交流部落四、文字...
HTML介绍以及常用代码
热门推荐
Xiaohuang的博客
12-05 1万+
HTML
HTML中限制input 输入框输入内容
cnds123的专栏
07-12 9061
先介绍使用 oninput 事件，限制HTML中input 输入框输入内容的方式，再介绍用其它方式限制HTML中input 输入框输入内容。
Html的基础知识
clarelove777的博客
12-08 1260
html分为html5，html，xhtml。 以html为例如何使用html 下载好后打开sublime text exe. 打开后的第一件事ctrl+s保存 并取名字 名字一定要以.html结尾 前面组好是英文字母。每次写完后也要记得ctrl+s保存。 取名之后 将输入法调制英文 输入一个感叹号（!）并按下tab 会出现html的基本结构。 上面这张图的第一行是整个html的头文件，也是页面的响应数据类型。 第二行是文件的语言类型en是英语 中文可以用zh-cn。 第三行的head表示html的头部
html文本输入框代码是什么？如何创建html文本输入框
web前端入门基础进阶教程-htmlcssjs
06-22 5901
创建html文本输入框？html文本输入框代码是什么？HTML表单是获取用户输入所需的内容。但是首先，你需要制作一个文本框，那么如何创建是一个问题，下面我们来讲一下Windows系统是如何创建html文本输入框。 **一：**首先创建一个HTML文件，打开记事本或任何其他纯文本编辑器，在Windows上，您可以通过“开始”菜单访问记事本，位于“附件”，然后是“记事本”。或者，使用Windows键+ R，然后键入记事本并按Enter键。 **二：**输入代码，写下基本标签（ ）。 **三：**现在写完了基本代
.css("display","none");
稻香的专栏
01-18 3874
CSS display:none和visibility:hidden的区别 visibility:hidden隐藏，但在浏览时保留位置；CSS display:none视为不存在，且不加载！ Overflow属性值{visible|hidden|scroll|auto}前提是先要限制DIV的宽度（width）和高度（height）。二者都是隐藏HTML元素，在视觉效果上没有区别，但在一些DOM
微信支付HTML5页面自定义键盘输入金额功能实现
资源摘要信息:"HTML5微信支付页面键盘输入金额代码" 知识点: 1. HTML5基础: HTML5是最新一代的超文本标记语言，用于构建和呈现网页内容。与以往版本相比，HTML5引入了更多的语义元素，如、、等，增强了对多媒体...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值