整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
# web前端必學功法之一：留言板
案例效果：
```html
css部分
<style>
.container{
width: 600px;
}
.mes-board{
margin: 25px 0;
padding: 10px;
background-color: gray;
}
.mes-board li{
padding: 0.7em;
list-style: none;
}
.mes-board li + li {
border-top: 1px dashed #ffffff;
}
.mes-board h4{
display: inline;
margin-right: 10px;
font-weight: 400px;
color: #000000;
}
.mes-board small{
color: #999999;
float: right;
}
.mes-board div{
padding: 0.4em 0;
text-align: justify;
font-size: 12px;
margin-top: 10px;
}
</style>
html部分：
<div class="container">
<!--發送留言-->
<div class="form-group">
<label for="userName">用戶姓名：</label>
<input type="text" class="form-control" id="userName">
</div>
<div class="form-group">
<label for="userName">留言內容：</label>
<textarea class="form-control" rows="3" id="content"></textarea>
<button class="btn btn-default" id="sendBtn">提交</button>
<span id="msg" style="color: red;"></span>
<!--留言列表-->
<div id="msgBoard" class="mes-board">
<li>
<h4>admin</h4>
<small>2021-04-22 15:34:45</small>
<div>
EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEOOOOOO
PPPPPPPPPPPPPPPPPPPPPPPPPPPPPEEEEEEEEEEEEEEEEEEEEEEEEEEE
</div>
</li>
<li>
<h4>admin</h4>
<small>2021-04-22 15:34:45</small>
<div>
EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEOOOOOO
PPPPPPPPPPPPPPPPPPPPPPPPPPPPPEEEEEEEEEEEEEEEEEEEEEEEEEEE
</div>
</li>
</div>
</div>
</div>
```
```javascript
<!--
留言板
實現思路：
1.獲取用戶姓名與留言內容
2.判斷值是否為空，如果為空，則提示信息
3.綁定提交按鈕的點擊事件
4.獲取姓名，留言內容以及當前系統時間，拼接成指定的html標簽
5.將標簽追加到留言表中
-->
<script>
// 發送留言
$("#sendBtn").click(function(){
//獲取用戶姓名
var userName = $("#userName").val();
//判斷非空
if(userName == null || userName.trim() == ""){
$("#msg").html("用戶姓名不能為空！");
return;
}
//獲取留言內容
var content= $("#content").val();
//判斷非空
if(content.trim() == ""){
$("#msg").html("請輸入留言內容！");
return;
}
//留言數據
var msg = "<li><h4>"+userName+"</h4><small>"+formatDate()+"</small>";
msg +="<div>"+content+"</div></li>";
//將留言內容追加到留言板中
$("#msgBoard").prepend(msg);
//清空內容與提示信息
$("#userName").val("");
$("#content").val("");
$("msg").val("");
});
//格式化時間
function formatDate(){
//獲取系統當前時間
var date = new Date();
//獲取年月日時分秒
var str = date.getFullYear()+"-"+(parseInt(date.getMonth())+1)+"-"+date.getDate();
str +" "+ date.getHours +":"+ date.getMinutes()+":"+date.getSeconds();
return str;
}
</script>
HTML 使用超級鏈接與網絡上的另一個文檔相連。幾乎可以在所有的網頁中找到鏈接。點擊鏈接可以從一張頁面跳轉到另一張頁面。
HTML 鏈接
如何在HTML文檔中創建鏈接。
(可以在本頁底端找到更多實例)
HTML 超鏈接（鏈接）
HTML使用標簽 <a>來設置超文本鏈接。
超鏈接可以是一個字，一個詞，或者一組詞，也可以是一幅圖像，您可以點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分。
當您把鼠標指針移動到網頁中的某個鏈接上時，箭頭會變為一只小手。
在標簽<a> 中使用了href屬性來描述鏈接的地址。
默認情況下，鏈接將以以下形式出現在瀏覽器中：
一個未訪問過的鏈接顯示為藍色字體并帶有下劃線。
訪問過的鏈接顯示為紫色并帶有下劃線。
點擊鏈接時，鏈接顯示為紅色并帶有下劃線。
注意：如果為這些超鏈接設置了 CSS 樣式，展示樣式會根據 CSS 的設定而顯示。
HTML 鏈接語法
鏈接的 HTML 代碼很簡單。它類似這樣：:
<a href="url">鏈接文本</a>
href 屬性描述了鏈接的目標。.
實例
<a >訪問菜鳥教程</a>
上面這行代碼顯示為：: 訪問菜鳥教程
點擊這個超鏈接會把用戶帶到菜鳥教程的首頁。
提示: "鏈接文本" 不必一定是文本。圖片或其他 HTML 元素都可以成為鏈接。
HTML 鏈接 - target 屬性
使用 target 屬性，你可以定義被鏈接的文檔在何處顯示。
下面的這行會在新窗口打開文檔：
實例
<a>訪問菜鳥教程!</a>
HTML 鏈接- id 屬性
id屬性可用于創建在一個HTML文檔書簽標記。
提示: 書簽是不以任何特殊的方式顯示，在HTML文檔中是不顯示的，所以對于讀者來說是隱藏的。
實例
在HTML文檔中插入ID:
<a id="tips">有用的提示部分</a>
在HTML文檔中創建一個鏈接到"有用的提示部分(id="tips"）"：
<a href="#tips">訪問有用的提示部分</a>
或者，從另一個頁面創建一個鏈接到"有用的提示部分(id="tips"）"：
<a >
訪問有用的提示部分</a>
基本的注意事項 - 有用的提示
注釋： 請始終將正斜杠添加到子文件夾。假如這樣書寫鏈接：，就會向服務器產生兩次 HTTP 請求。這是因為服務器會添加正斜杠到這個地址，然后創建一個新的請求，就像這樣：。
圖片鏈接
如何使用圖片鏈接。
在當前頁面鏈接到指定位置
如何使用書簽
跳出框架
本例演示如何跳出框架，假如你的頁面被固定在框架之內。
創建電子郵件鏈接
本例演示如何如何鏈接到一個郵件。（本例在安裝郵件客戶端程序后才能工作。）
建電子郵件鏈接 2
本例演示更加復雜的郵件鏈接。
HTML 鏈接標簽
| 標簽 | 描述 |
|---|---|
| <a> | 定義一個超級鏈接 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
一篇文章我們說了單選框、多選框以及下拉框的使用，今天呢我們繼續看一下表單剩下的常用控件：提交按鈕以及重置按鈕。
提交按鈕，顧名思義就是當我們填好了表單中的數據之后，我們需要通過提交按鈕來將數據傳遞到后臺的服務器中，供后臺程序使用。
使用語法：<input type="submit" value="提交數據">
詳細講解：
1、type：只有當type值設置為submit時，按鈕才有提交作用，才能正常的進行表單的提交。（或者使用JavaScript代碼來觸發提交事件，這個到后期我們講解js的時候我進行介紹）
2、value：按鈕上顯示的文字，顯示按鈕的名稱。
當用戶需要重置表單信息到初始時的狀態時，比如用戶輸入“用戶名”后，發現書寫有誤，可以使用重置按鈕使輸入框恢復到初始狀態。只需要把type設置為"reset"就可以。
使用語法：<input type="reset" value="重置數據">
詳細講解：
1、type：只有當type值設置為reset時，按鈕才有重置作用，點擊按鈕會將form表單內的所有信息還原到初始未輸入的狀態。
2、value：按鈕上顯示的文字，顯示重置按鈕的名稱
使用練習：
我們創建一個表單，數據我們以post的形式提交到百度首頁，表單里邊有姓名和年齡的輸入框，并且添加提交數據按鈕以及重置數據按鈕。具體代碼如下圖所示：
在網頁中的顯示效果就如下圖所示：
我們在姓名和年齡輸入框中輸入內容，點擊重置數據既可以清空里邊的內容，還原到初始狀態，點擊提交數據按鈕，那么數據將會提交到我們的指定鏈接處。
以上呢就是表單最常用的一些控件了，接下來我們對學到的表單知識進行一次綜合的測試，我們來寫一個完整的表單包含我們學到的所有知識。
我們在這里就寫一個網站制作常用的留言表，表格名稱就叫留言表，然后表中包含有姓名輸入框、性別單選框（默認選中男）、愛好多選框（默認選中第一個）、所在地區下拉框、留言內容多行文本框，以及提交信息按鈕和重置信息按鈕。數據提交呢我們還是提交到百度，提交類型我們使用post。具體的代碼如下圖所示：
在網頁中的顯示效果就如下圖所示：
好了，到了這里我們的第一個表單就算是做完了，到這有人就會問了，為什么別人的代碼在瀏覽器上看起來都是那么的規整，我這么寫完看著怎么這么丑，接下來的文章我們將為大家介紹css的知識了，學習了css你也可以將你的頁面做的高達上起來。最后大家看完一定要自己動手寫一寫，只有自己寫出的代碼才能體會到其中的樂趣，多加練習才是王道。
每日金句：人生最大的喜悅是每個人都說你做不到，你卻完成它了！喜歡我的文章的小伙伴記得關注一下哦，每天將為你更新最新知識。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
