PHP開發(fā) 新聞發(fā)布系統(tǒng)之發(fā)布HTML頁面
上圖就是我們要做的新聞發(fā)布頁面
一個簡單的<form>表單，加上一個簡單CSS背景
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文網(wǎng)</title>
<style>
body{
background-color: rgba(128, 128, 128, 0.3);
}
</style>
</head>
<body>
<form method="post" action="new_post.php" name="myform">
<h1>發(fā)布新聞系統(tǒng)</h1>
<p>標題：<input type="text" name="title"/></p>
<p>內(nèi)容：<textarea cols=30 rows=5 name="content"></textarea></p>
<p><button>發(fā)布新聞</button></p>
</form>
</body>
</html>我們要對我們的新聞發(fā)布頁面做一些驗證，如果標題和新聞內(nèi)容沒有填寫是不允許發(fā)布的，我們用JS做了驗證
需要在<form>表單里面做一個JS事件，代碼如下
<form??method="post"?action="new_post.php"?onsubmit="?return?foo();"?name="myform">
在head里面加入下面的代碼
<script>
???function?foo(){
???????if(myform.title.value==""){
???????????alert('請?zhí)顚懩愕男侣剺祟}');
???????????myform.title.focus();
???????????return?false;
???????}
???????if(myform.content.value==""){
???????????alert('新聞內(nèi)容不能為空哦');
???????????myform.content.focus();
???????????return?false;
???????}
???}
</script>
???function?foo(){
???????if(myform.title.value==""){
???????????alert('請?zhí)顚懩愕男侣剺祟}');
???????????myform.title.focus();
???????????return?false;
???????}
???????if(myform.content.value==""){
???????????alert('新聞內(nèi)容不能為空哦');
???????????myform.content.focus();
???????????return?false;
???????}
???}
</script>
現(xiàn)在如果新聞的標題和內(nèi)容不填寫就提交發(fā)布，是不允許發(fā)布的
new.html 文件完整代碼如下
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文網(wǎng)</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('請?zhí)顚懩愕男侣剺祟}');
myform.title.focus();
return false;
}
if(myform.content.value==""){
alert('新聞內(nèi)容不能為空哦');
myform.content.focus();
return false;
}
}
</script>
</head>
<body>
<form method="post" action="new_post.php" onsubmit=" return foo();" name="myform">
<h1>發(fā)布新聞系統(tǒng)</h1>
<p>標題：<input type="text" name="title"/></p>
<p>內(nèi)容：<textarea cols=30 rows=5 name="content"></textarea></p>
<p><button>發(fā)布新聞</button></p>
</form>
</body>
</html>下一步就是把我們在頁面填寫的新聞信息，提交到?new_post.php 頁面處理
