自我介绍网页填写表格PHP，JavaScript，html，css代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自我介绍表格——SelfIntroductuonTable.html</title>
<script type="text/javascript" src="SelfIntroductuonTable.js"></script>
<style type="text/css">
#table1{border-radius:1px solid #000;
width: 600px;
border-collapse:collapse;
margin: 0 auto;
}
#tr1{height:30px
}
td{border: 1px solid #000;
font-size: 10pt;
font-weight: bold;
text-align: center;
}
#uname,#age,#password1,#password2,#color{
width: 280px;
height: 25px;
}
#introduction{
width:280px;
height: 60px;
}
</style>
</head>
<body>
<form id="fontTable1" name="fontTable" method="post" action="database.php" onsubmit="return validate()" enctype="multipart/form-data">
<table id="table1" name="table1" >
<tr id="tr1">
<td colspan="3" align="3">自我介绍</td>
</tr>
<tr>
<td width="120px">名字：</td>
<td width="300px">
<input type="text" name="uname" id="uname">
</td>
<td width="180px">必须在6—20个字母之间</td>
</tr>
<tr id="tr1">
<td>性别：</td>
<td><input type="radio" name="gender" id="gender" value="男" >男
<input type="radio" name="gender" id="gender" value="女" >女</td>
<td></td>
</tr>
<tr id="tr1">
<td>年龄：</td>
<td><input type="text" name="age" id="age" required="required"></td>
<td>取值在0——100之间</td>
</tr>
<tr id="tr1">
<td>个人密码：</td>
<td><input type="passward" name="password1" id="password1" required="required"></td>
<td>6——10个字符</td>
</tr>
<tr id="tr1">
<td>确认密码：</td>
<td><input type="passward" name="password2" id="password2"></td>
<td>与个人密码相同</td>
</tr>
<tr id="tr1">
<td>你的爱好：</td>
<td>
<input type="checkbox" name="like[]" value="看书" >看书
<input type="checkbox" name="like[]" value="打篮球" >打篮球
<input type="checkbox" name="like[]" value="游泳" >游泳
</td>
<td></td>
</tr>
<tr id="tr1">
<td>你最喜欢的颜色：</td>
<td>
<select name="color" id="color" align="center" >
<option value="红色">红色</option>
<option value="黄色">黄色</option>
<option value="蓝色" selected="selected">蓝色</option>
<option value="黑色">黑色</option>
</select>
</td>
<td>
</td>
</tr>
<tr id="tr1" height="65px">
<td>个人介绍</td>
<td>
<textarea name="jieshao" id="introduction" required="required"></textarea>
</td>
<td>不能为空</td>
</tr>
<tr>
<td>请上传头像文件</td>
<td>
<p><input type="file" name="file1[]" id="file1" multiple></p>
</td>
<td>必须上传头像文件</td>
</tr>
<tr id="tr1">
<td colspan="3" align="center">
<button type="submit" value="提交" >提交</button>
<button type="rest" name="重置">重置</button>
</td>
</tr>
</table>
</form>
</body>
</html>
// 表单提交java scrip
// function关键字定义函数
function validate(){
// 用户名限制
// 获取用户名
// 使用document.getElementById('uname')获取id属性是uname的表单元素
// 然后使用属性value获取文本框中输入的数组，放在变量uname中保存；
var uname=document.getElementById('uname').value;
var len=uname.length;
// 判断len的取值是否为6~20个字符之间，如果不是，则使用alert（）函数弹出指定的提示信息
// 使用return false 语句返回函数的结果为false，结束函数的执行过程
if(len<6||len>20){
alert('姓名必须在6~20个字符之间，请重新输入!');
return false;
// return的作用将页面运行过程停留在当前界面，而不用吧不符合要求的数据提交到服务器端
}
// 判断年龄是否在0~100之间
var age=document.getElementById('age').value;
if (age<0 ||age>100) {
alert('年龄必须在0~100之间,请重新输入!');
return false;
}
// 密码和确认密码相同验证
var password1=document.getElementById('password1').value;
var password2=document.getElementById('password2').value;
var passwordLen1=password1.length;
if (passwordLen1<6||passwordLen1>10) {
alert('密码必须在6~10个字符之间请重新输入');
return false;
}
if (password2!=password1) {
alert('两次输入,密码不相同，请重新输入！');
return false;
}
// var introduction=document.getElementById('introduction').value;
// if (introduction!=" ") {
// alert('个人介绍不能为空，请重新输入！');
// return false;
// }
}
<!-- form.php -->
<?php
header("Content-Type:text/html;charset=UTF-8");
echo "尊重的用户你好，您输入的信息如下：<br><hr>";
echo "您输入的用户名是：".$_POST["uname"]."<br>";
echo "您输入的性别是：".$_POST["gender"]."<br>";
echo "您输入的年龄是：".$_POST["age"]."<br>";
echo "您输入的密码是：".$_POST["password1"]."<br>";
if (isset($_POST['like'])){
$like=implode(",", $_POST['like']);
echo '你的兴趣爱好是：'.$like.'<br>';
}
else{
echo "您没有输入兴趣爱好";
}
echo "您喜欢的颜色是：".$_POST["color"]."<br>";
echo "您的个人介绍是：".$_POST["jieshao"]."<br>";
?>
<?php
// 接收文件--UploadFilesDatabase.php
// 在当前页面中显示上传文件的名称，文件的类型，文件大小（以KB表示）。临时文件的名称等等内容
header("Content-Type:text/html;charset=UTF-8");
$name=$_FILES['file1']['name'];
$type=$_FILES['file1']['type'];
$size=round($_FILES['file1']['size']/1024,2).'KB';
$tmpname=$_FILES['file1']['tmp_name'];
echo "你上传的文件名称为：".$name.'<br>';
echo "你上传的文件类型为：".$type.'<br>';
echo "你上传的文件大小为：".$size.'<br>';
echo "你上传的文件临时位置临时名称为：".$tmpname.'<br>';
// 将上传后的文件移动到指定的位置并按照指定的名称来保存 move_uploaded_file()
$ftmpname=$_FILES['file1']['tmp_name'];
$ftname=iconv("UTF-8", "GB2312",$_FILES['file1']['name'] );
// move_uploaded_file()只支持GB2312或者GBk编码，并不支持UTF-8编码，如果页面字符集编码类型是UTF-8，并且上传的文件名称包含汉字，该函数可能无法执行成功。因此，将使用iconv（）函数转换名称中的汉字编码来解决问题
move_uploaded_file($ftmpname,"picture/$ftname");
echo "您的照片为：<img src='picture/$ftname'>";
?>自我介绍网页填写表格PHP，JavaScript，html，css代码的更多相关文章
- flask模板应用-javaScript和CSS中jinja2
当程序逐渐变大时,很多时候我们需要在javaScript和CSS代码中使用jinja2提供的变量值,甚至是控制语句.比如,通过传入模板的theme_color变量来为页面设置主题色彩,或是根据用户是否 ...
- 自我介绍及如何注册GITHUB
自我介绍 我是来自南通大学网络工程141班的周楠,我的学号是1413042014,我的兴趣是喜欢玩游戏(如果这算是一个兴趣爱好的话),喜欢尝试各种游戏. 如何注册一个GitHub账号? 1.首先我们需 ...
- 网页设计与开发——HTML、CSS、JavaScript (王津涛) pdf扫描版
网页设计与开发——html.css.javascript从网页制作实际出发,除了详细地介绍html页面制作.css样式控制和javascript动态程序之外,还介绍了html 5.全书共分15章,各章 ...
- it工程师常用英文自我介绍常用用语
Good morning ! It is really my honor to have this opportunity for an interview, I hope i can make ...
- 自我介绍及注册github和上传文件
自我介绍: 周侃 年龄20 喜好:玩游戏,赚钱,交际 理想:想要改变中国手游界颓靡的时代,让它进入新次元. 注册github,以及上传文件: 今天给大家来讲解下如何注册githup 当我们打开gith ...
- JQuery制作网页—— 第三章 JavaScript操作DOM对象
1. DOM:Document Object Model(文档对象模型): DOM操作: ●DOM是Document Object Model的缩 ...
- 《PHP程序员面试笔试宝典》——如何进行自我介绍？
本文摘自<PHP程序员面试笔试宝典> PHP面试技巧分享,PHP面试题,PHP宝典尽在"琉忆编程库". 自我介绍是面试中至关重要的一个步骤,很多面试官对求职者提出的第一 ...
- 推荐几款制作网页滚动动画的 JavaScript 库
这里集合了几款很棒的制作网页滚动动画的 JavaScript 库和插件.它们中,有的可以帮助你在页面滚动的时候添加动感的元素动画,有的则是实现目前非常流行的全屏页面切换动画.相信借助这些插件,你也可以 ...
- 作业一：创建个人技术博客、自我介绍、简单的C程序
年9月14日中午12点: 一.主要内容 建个人技术博客(博客园 www.cnblogs.com) 本学期将通过写博客的方式提交作业,实际上,最终的目的是希望同学们能通过博客的形式记录我们整个学习过程 ...
随机推荐
- lua 表
最近在尝试配置 awesome WM,因此粗略地学习了一下 lua . 在学习过程中,我完全被表表在 lua 中的应用所镇住了. 表在 lua 中真的是无处不在:首先,它可以作为字典和数组来用:此外, ...
- 浅析protobuf应用
Protocal Buffers(简称protobuf)是谷歌的一项技术,用于结构化的数据序列化.反序列化,常用于RPC 系统(Remote Procedure Call Protocol Syste ...
- 用友U8API 8.9-15.0接口开发前提，选好开发方式
在用友接口开发这条路上,走走停停过了好几年.对于如何选择哪种方式,目前总结几点, 对于开发,目前可以实现的有三种方式 一.是通过用友官方提供的(EAI/API)接口 这种方式的优点 ...
- LQB2013A04倒置的标签
这个题,一开始犯了一个很幼稚的错误 贴贴代码 #include<iostream> #include<stdio.h> #include<stdlib.h> #in ...
- ZR 提高十连 DAY 4
哇 这题目怎么一次比一次毒瘤 当然这次还好 有会做的题目. T1 一眼看上去 毒瘤!再看一眼 我真不想看了 扔了. T2 哇感觉能写 哇这不是 随便都有40分了么 二分?优化一下65到手了.然后剩下的 ...
- luogu P2467 [SDOI2010]地精部落
很有意思的dp计数题目. 思考一下发现开始时山峰和开始是山谷的方案数是相同的 所以我们只需要统计一个即可. 证明的话可以考虑对于任意一种开始时山峰的方案 每个数字变成n-a[i]+1 那么可以此方案还 ...
- Android JNI之数据类型
JNI中数据类型的意义在于桥接Java数据类型与C数据类型. 简单数据类型: Java Type Native Type Description boolean jboolean unsigned 8 ...
- SpringCloud系列之客户端负载均衡Netflix Ribbon
1. 什么是负载均衡? 负载均衡是一种基础的网络服务,它的核心原理是按照指定的负载均衡算法,将请求分配到后端服务集群上,从而为系统提供并行处理和高可用的能力.提到负载均衡,你可能想到nginx.对于负 ...
- CentOS 7.0删除mysql服务
今天在Centos下安装mysql服务,就小记下,前面收藏了一篇安装的文档,我测试是可以用的,现在测试一下怎么删除 删除有两种方法,一种通过rpm -e进行删除 另一种通过yum remove 一.r ...
- Android Studio--家庭记账本（一）
今天通过观看视频,根据老师所讲内容,编译代码.实现了Android Studio记账本里面的增加功能 源代码如下: CostBean.java: package com.example.family; ...