HTML、PHP、MySQL之间的联系和常见问题

一、input中name和id的区别

  表单里面input标签有id和name,ID就像是一个人的身份证号码,而Name就像是他的名字,ID显然是唯一的,而Name是可以重复的。

  id要符合标识的要求,比如大小写敏感,最好不要包含下划线(因为不兼容CSS)。而name基本上没有什么要求,甚至可以用数字。

【Note】:

  name主要是表单元素里才有的属性。通过js的document.表单名称.文本框.value来获取文本框的值,其中的表单名称和文本框名 称指的是name,而非表单元素例如div,span等是没有name属性的,而id属性是任何一个HTML元素都会有的。当你需要用js获取非表单元素 对象是就得用document.getElementByIdx("id")

1、name在以下用途是不能替代的:

  • 表单(form)的控件名,提交的数据都用控件的name而不是id来控制。因为有许多name会同时对应多个控件,比如checkbox和radio, 而id必须是全文档中唯一的。此外浏览器会根据name来设定发送到服务器的request。因此如果用id,服务器是无法得到数据的。
  • frame和window的名字,用于在其他frame或window指定target。

2、以下情况只能用id:

  • label与form控件的关联,
<label for="MyInput">My Input</label>
<input id="MyInput" type="text">
for属性指定与label关联的元素的id,不可用name替代。
  • CSS的元素选择机制,以#MyId的方式指定应用样式的元素,不能用name替代。
  • 脚本中获得对象。

3、input中name/id/class的作用:

【name属性的作用】:

1)供给post及get传值使用;
2)供给js代码使用;

【id属性的作用】:

1)供给js代码使用(其它支持id属性的标签同样有该功能);
2)供给CSS代码使用(其它支持id属性的标签同样有该功能);

【class属性的作用】:

1)供给CSS代码使用(其它支持class属性的标签同样有该功能);

  人们往往喜欢将name和id命名为相同的值,其实这样是可行的,也便于管理和代码解读。

二、HTML前端注册的Demo

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册</title>
<style>
/* 让页面所有元素的padding和margin都设置为0 */ 
*{margin:0;padding:0;box-sizing:border-box;}
/* 设置背景图,字体设置为微软雅黑 */ 
body{background-image:url(background.jpg);font-family: "微软雅黑", sans-serif;}
/* 引用图片高度设置为28px,就是页面最上方像屋檐一样的黑色图 */ 
/* 整个登录框的css,并使用绝对定位居中 */ 
.regist { 
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -150px 0 0 -150px;
    width:300px;
    height:300px;
}
/* 前面分析过的h1标签的css,text-shadow设置阴影使文字更好看,letter-spacing设置字符间距 */ 
.regist h1 { color:#555555; text-shadow: 0px 10px 8px #CDC673; letter-spacing:2px;text-align:center;margin-bottom:20px; }
/* 两个输入框的css,border属性设置边框线粗细以及颜色,border-radius设置边框的圆角角度 */
input{
    padding:10px;
    width:100%;
    color:white;
    margin-bottom:10px;
    background-color:#555555;
    border: 1px solid black;
    border-radius:4px;
    letter-spacing:2px;
}
/* 登录按钮的css,cursor:pointer当鼠标移到按钮上面时变成小手形状 */
form button{
    width:100%;
    padding:10px;
    background-color:#CDC673;
    border:1px solid black;
    border-radius:4px;
    cursor:pointer; 
}
</style>
</head>
<body>
<div class="headtop"></div>
<div class="regist">
  <h1>Regist</h1>
  <!-- html通过action和post方法向后端传递数据,
  action属性是指该表单要提交到哪里进行处理 -->
  <form id="RegForm" action="regist.php" method="POST">
  	<!-- id是唯一标识该容器的属性 -->
  	<input type="text" id="userId" name="userId" placeholder="账 号" required="required">
    <input type="text" id="userName" name="userName" placeholder="用户名" required="required">
    <input type="password" id="passWord" name="passWord" placeholder="密  码" required="required">
    <input type="password" id="passWord2" name="passWord2" placeholder="重复密码" required="required">
    <input type="text" id="userAddress" name="userAddress" placeholder="地 址" required="required">
  	<input type="submit" id="userButton" name="btn" onclick="check()" value="注册">
  </form>
</div>
</body>

<script type="text/javascript" language="javascript" src="regist.php">
function check(){
	// document.getElementById("userId").value获取某个id的属性值
	// console.log(id)可以用于调试
	var userid=document.getElementById("userId").value;
	var userName=document.getElementById("userName").value;
	var passWord=document.getElementById("passWord").value;
	var passWord2=document.getElementById("passWord2").value;
	var userAddress=document.getElementById("userAddress").value;
	if (userid == ""){
		alert("账号不可为空!"); // 在页面上方发出警告
		return false;
	}
	if (userName == ""){
		alert("用户名不可为空!");
		return false;
	}
	if (passWord == ""){
		alert("密码不可为空!");
		return false;
	}
	if (passWord2 != passWord){
		alert("两次密码不一致!");
		return false;
	}
	if (userAddress == ""){
		alert("地址不可为空!");
		return false;
	}
}
</script>
</html>

三、PHP表单提交时获取不到post数据

  找到php.ini 配置文件,查找enable_post_data_reading变量,确保其打开状态,并且该语句前面的分号要去掉(有分号的语句是注释语句):
在这里插入图片描述
在这里插入图片描述

四、PHP调试时显示详细错误信息

在这里插入图片描述

ini_set('display_errors','On');
 error_reporting(E_ALL);

五、PHP获取post数据后写入MySQL的Demo

<?php 
	//输出详细错误信息
    ini_set('display_errors','On');
    error_reporting(E_ALL);
    //指定编码
    header("content-type:text/html;charset=utf8");
    $server="localhost";//主机
    $username="root";//你的数据库用户名
    $password="123456";//你的数据库密码
    $dbname="db_chatroom";
    //新版本最好使用这种模式,不要使用mysql_connect()
    $con = new mysqli($server,$username,$password,$dbname);
    if($con->connect_error){
        die("连接失败".$con->connect_error);
    }
    //判断post过来的数据是否被提交过来(单引号里面的名称和HTML的submit的name对应)
    if(!isset($_POST['btn'])){
        exit("错误执行");
    } 
    $userId=$_POST['userId']; //post获取表单里的userId
    $userName=$_POST['userName']; //post获取表单里的userName
    $passWord=$_POST['passWord']; //post获取表单里的passWord
    $userAddress=$_POST['userAddress']; //post获取表单里的userAddress
    //向数据库插入表单传来的值
    $sql="insert into t_user_info (id, userName, passWord, userAddress) values ('$userId', '$userName', '$passWord' ,'$userAddress')"; 
    //插入成功则跳转到某一个HTML页面
    if($con->query($sql) === true){
        header("Location:chatroom.html");
    }
    else {
        echo 'data insert fail';
    }
    $con->close();
?>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

~青萍之末~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值