PHP开发 新闻发布系统之发布HTML页面
上图就是我们要做的新闻发布页面
一个简单的<form>表单，加上一个简单CSS背景
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
<style>
body{
background-color: rgba(128, 128, 128, 0.3);
}
</style>
</head>
<body>
<form method="post" action="new_post.php" name="myform">
<h1>发布新闻系统</h1>
<p>标题：<input type="text" name="title"/></p>
<p>内容：<textarea cols=30 rows=5 name="content"></textarea></p>
<p><button>发布新闻</button></p>
</form>
</body>
</html>我们要对我们的新闻发布页面做一些验证，如果标题和新闻内容没有填写是不允许发布的，我们用JS做了验证
需要在<form>表单里面做一个JS事件，代码如下
<form method="post" action="new_post.php" onsubmit=" return foo();" name="myform">
在head里面加入下面的代码
<script>
function foo(){
if(myform.title.value==""){
alert('请填写你的新闻标题');
myform.title.focus();
return false;
}
if(myform.content.value==""){
alert('新闻内容不能为空哦');
myform.content.focus();
return false;
}
}
</script>
function foo(){
if(myform.title.value==""){
alert('请填写你的新闻标题');
myform.title.focus();
return false;
}
if(myform.content.value==""){
alert('新闻内容不能为空哦');
myform.content.focus();
return false;
}
}
</script>
现在如果新闻的标题和内容不填写就提交发布，是不允许发布的
new.html 文件完整代码如下
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no" />
<style>
body{
background-color: rgba(128, 128, 128, 0.3);
}
</style>
<script>
function foo(){
if(myform.title.value==""){
alert('请填写你的新闻标题');
myform.title.focus();
return false;
}
if(myform.content.value==""){
alert('新闻内容不能为空哦');
myform.content.focus();
return false;
}
}
</script>
</head>
<body>
<form method="post" action="new_post.php" onsubmit=" return foo();" name="myform">
<h1>发布新闻系统</h1>
<p>标题：<input type="text" name="title"/></p>
<p>内容：<textarea cols=30 rows=5 name="content"></textarea></p>
<p><button>发布新闻</button></p>
</form>
</body>
</html>下一步就是把我们在页面填写的新闻信息，提交到 new_post.php 页面处理
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no" />
<style>
body{
background-color: rgba(128, 128, 128, 0.3);
}
</style>
<script>
function foo(){
if(myform.title.value==""){
alert('请填写你的新闻标题');
myform.title.focus();
return false;
}
if(myform.content.value==""){
alert('新闻内容不能为空哦');
myform.content.focus();
return false;
}
}
</script>
</head>
<body>
<form method="post" action="new_post.php" onsubmit=" return foo();" name="myform">
<h1>发布新闻系统</h1>
<p>标题：<input type="text" name="title"/></p>
<p>内容：<textarea cols=30 rows=5 name="content"></textarea></p>
<p><button>发布新闻</button></p>
</form>
</body>
</html>
