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

文章目录

一、input中name和id的区别
1、name在以下用途是不能替代的：
2、以下情况只能用id：
3、input中name/id/class的作用：
二、HTML前端注册的Demo
三、PHP表单提交时获取不到post数据
四、PHP调试时显示详细错误信息
五、PHP获取post数据后写入MySQL的Demo

一、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();
?>