整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
tml頁面設置動態(tài)金額滾動效果！
一開始加載頁面，數(shù)字都會過渡滾動到具體數(shù)字上！
代碼：
html:
css:
js:
篇介紹了表單的使用，表單有很多控件，比如輸入框，密碼框、文本域，按鈕等。按類型可分如下：
此類控件有很多種類型，使用<input type="類型">語法，常見類型如下：
type 值 | 含義 |
text | 文字字段 |
password | 密碼域，用戶看不到明文，以*代替 |
radio | 單選按鈕 |
checkbox | 多選按鈕 |
button | 普通按鈕 |
submit | 提交按鈕 |
reset | 重置按鈕 |
image | 圖像域，用圖像作為背景的提交按鈕 |
hidden | 隱藏域，不可見的輸入框 |
file | 文本域，用于上傳文件等非文本數(shù)據(jù) |
文本輸入框和密碼框
除了顯示形式不一樣，其它屬性一樣，有以下屬性：
如下是文本輸入框和密碼框制作一個登錄表單
html代碼：
<!DOCTYPE html>
<html>
<body>
<h1>用戶登錄</h1>
<form action="/demo/html/action_page.php">
<label for="fname">用戶名:</label><br>
<input type="text" id="username" name="username" value=""><br>
<label for="lname">密碼:</label><br>
<input type="password" id="pwsd" name="pwsd" value=""><br><br>
<input type="submit" value="提交">
</form>
</body>
</html>顯示效果：
HTML5 輸入類型
除了以上幾種類型，HTML5 還增加了多個新的輸入類型：
如下代碼：
<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
數(shù)字類型（1 到 5 之間）：
<input type="number" name="quantity" min="1" max="5">
IE9 及早期版本不支持 type="number"。<br>
color 選擇顏色：
<input type="color" name="color"><br>
生日:
<input type="date" name="bday"><br>
年月：
<input type="month" name="bdaymonth"><br>
年周：
<input type="week" name="week_year"><br>
時間：
<input type="time" name="usr_time"><br>
一定范圍
<input type="range" name="points" min="0" max="10"><br>
E-mail:
<input type="email" name="email">
能夠在被提交時自動對電子郵件地址進行驗證<br>
搜索：
<input type="search" name="googlesearch"><br>
電話：
<input type="tel" name="usrtel">
目前只有 Safari 8 支持 tel 類型。<br>
url：
<input type="url" name="url">
提交時能夠自動驗證 url 字段<br>
<input type="submit">
</form>
</body>
</html>效果如下：
單選和多選按鈕
使用 type = “radio” 和 type =“checkbox” 定義是單選還是多選，除了name和value屬性外，單選和多選都有一個 checked屬性定義默認選擇的項，checked = “true”指選中那個選項，表單會將 checked = “true” 的選型值傳遞給后臺。
如下實例：
<!DOCTYPE html>
<html>
<body>
<h4>單選和多選</h4>
<form action="/demo/demo_form.asp">
水果：
<input type="radio" name="shuiguo" value="banner" checked> 香蕉
<input type="radio" name="shuiguo" value="apple"> 蘋果
<br><br>
省份：
<input type="checkbox" name="shengfen" value="shannxi" checked> 陜西
<input type="checkbox" name="shengfen" value="sanxi"> 山西
<input type="checkbox" name="shengfen" value="gdong"> 廣東
<br><br>
<input type="submit">
</form>
</body>
</html>顯示效果：
單選和多選傳遞給后臺的數(shù)據(jù)是不一樣的，如下會看到地址欄中的數(shù)據(jù)，多選會發(fā)送多個值，后臺將會獲取一個數(shù)組形式的數(shù)據(jù)。
/demo/demo_form.asp?shuiguo=banner&shengfen=shannxi&shengfen=sanxi普通按鈕、提交按鈕、重置按鈕
普通按鈕：type = “button”，一般配合腳本使用，語法如下：
<input type="button" name="名稱" value="按鈕值" onclick="腳本程序" />value 值就是按鈕在頁面顯示的文字，onclick屬性定義了腳本事件，這里指單擊按鈕時所進行的處理。
如下示例：
<!DOCTYPE html>
<html>
<body>
<form>
<input type="button" value="普通按鈕">
<input type="button" value="打開窗口" onclick="window.open()">
<input type="button" value="您好" onclick="alert('您好')">
</form>
</body>
</html>
單擊您好按鈕
提交按鈕：type = “submit”，用于提交表單內(nèi)容，是一種特殊按鈕。
如剛才的登錄表單，提交后會返回結果：
重置按鈕：type="reset"，用于清除表單數(shù)據(jù)，也是一種特殊按鈕。
輸入數(shù)據(jù)
點擊重置按鈕后，表單數(shù)據(jù)清空
重置清空數(shù)據(jù)
HTML5 按鈕
除了使用input定義按鈕，還可以使用 html5 新增的<button> 標簽定義按鈕，button 使用語法如下：
<form action="/demo/html/action_page.php">
<button type="button">普通按鈕</button>
<button type="submit">提交按鈕</button>
</form> 其它輸入類控件
隱藏域 —— hidden
文件域 —— file
如下示例：
<form action="/demo/html/action_page.php">
<label for="fname">隱藏域:</label>
<input type="hidden" id="hidden" name="hidden" value=""><br>
<label for="lname">文件域:</label>
<input type="file" id="file" name="file" value=""><br>
<input type="submit" value="提交">
</form> 顯示效果
可以看到，隱藏域在頁面中不顯示，單擊文件域選擇文件按鈕可以選擇文件，比如word文件，電子表格文件等，會以非文本方式傳送到后臺的，常用來實現(xiàn)文件上傳功能。
除了input 類型的控件，還有文本域 textarea ，一種特殊的文本框，它與input 文本輸入框的區(qū)別就是可以輸入多行文字，input 文本輸入框是單行的無法輸入多行文字。
如下示例：
<p>textarea 元素定義多行輸入字段。</p>
<form action="/demo/html/action_page.php">
<textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>
<br><br>
<input type="submit">
</form>效果如下：
rows 屬性定義文本域的高度是幾行，cols 定義文本域?qū)挾日紟琢校热缟厦娑x了高10行寬30列的文本域。
下拉菜單作用和單選按鈕類似，只不過它更加節(jié)省空間，當要選擇的選型很多時，就不適合使用radio空間，所以當選項很多的時候，使用下拉菜單，語法如下：
<select name="名稱">
<option value="選項值1" selected>選項1</option>
<option value="選項值2">選項3</option>
更多option......
</select>多選列表和多選按鈕類似，一樣為了節(jié)省空間，當數(shù)據(jù)選項比較多時，使用多選列表，語法如下：
<select name="名稱" size="可看見的列表項數(shù)" multiple>
<option value="選項值1" selected>選項1</option>
<option value="選項值2">選項3</option>
更多option......
</select>多選比下拉菜單不同之處是多了一個multiple屬性，定義多選的，且表現(xiàn)形式也不一樣，不是下拉而是一個列表。
如下代碼：
<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
下拉菜單：<br>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br>
多選列表：<br>
<select name="cars" size="3" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit">
</form>
</body>
</html>顯示效果：
這里需要注意的是，多選列表多選時需要按住ctrl鍵同時鼠標單擊選擇才能多選，效果如下：
到這里，已介紹了大部分的表單控件，現(xiàn)在你可以使用他們制作自己的表單，表單通常在動態(tài)網(wǎng)站中使用，這為以后制作動態(tài)網(wǎng)站打下基礎。
還有許多屬性沒有講到，比如html5新增的一些屬性和功能，可自行參考 w3cshool 等網(wǎng)站學習，感謝關注，學習愉快！
上篇 ： 前端入門——html 表單
下篇： 前端入門 —— 網(wǎng)頁中使用窗口框架
說明：
1.1 了解vue的基本知識：網(wǎng)頁顯示方法和js結構。
1.2 如何獲取動態(tài)時間。
2 效果圖
3 完整代碼：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue.js數(shù)字時鐘本地時間代碼</title>
<!--css設置，沒區(qū)別，html直接設置-->
<style>
html, body {
height: 100%;
}
body {
/*整體背景顏色漸變效果設置*/
background: radial-gradient(ellipse at center, pink 0%, blue 70%);
background-size: 100%;
}
p {
margin: 0;
padding: 0;
}
#clock {
font-family: 'Share Tech Mono', monospace;
text-align: center;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
/*顯示文字顏色*/
color: lightgreen;
text-shadow: 0 0 20px #0aafe6, 0 0 20px rgba(10, 175, 230, 0);
}
#clock .time {
letter-spacing: 0.05em;
font-size: 80px;
padding: 5px 0;
}
#clock .date {
letter-spacing: 0.1em;
font-size: 24px;
}
#clock .text {
letter-spacing: 0.1em;
font-size: 12px;
font-style: italic;
padding: 20px 0 0;
}
</style>
</head>
<body>
<!--引入本地vuejs，可以導入在線vue.min.js，此處省略-->
<script type="text/javascript" src="js/vue.min.js"></script>
<!--div容器定義，vue的特點-->
<div id="clock">
<!--三行顯示：有順序性；2對大括號-->
<p class="text">數(shù)字時鐘</p>
<p class="date">{{ date }}</p>
<p class="time">{{ time }}</p>
</div>
<!--vue格式的js文件-->
<script>
// vue格式的js文件和js文件格式差不多，采用倒裝法，與python不同-->
var clock = new Vue({
// el就是對象：上面div里的id內(nèi)容，注意#符號
el: '#clock',
data: {
// data里面的內(nèi)容就是class的內(nèi)容，但是因為可變所以先是空的
// 先各自定義一個空的，后面利用函數(shù)獲得值
time: '',
date: ''
}
});
/* Model層 */
var week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var timerID = setInterval(updateTime, 1000);
// 先定義一個空的時間更新函數(shù)
updateTime();
// 再定義時間更新函數(shù)，獲取動態(tài)時間值
function updateTime() {
// 定義一個cd變量獲取動態(tài)時間
var cd = new Date();
// 注意這里的time和date的獲得值，就會賦值給上面的data里面去；2是顯示2位；4是顯示4位
clock.time = zeroPadding(cd.getHours(), 2) + ':' + zeroPadding(cd.getMinutes(), 2) + ':' + zeroPadding(cd.getSeconds(), 2);
clock.date = zeroPadding(cd.getFullYear(), 4) + '-' + zeroPadding(cd.getMonth()+1, 2) + '-' + zeroPadding(cd.getDate(), 2) + ' ' + week[cd.getDay()];
};
// 定義零填充函數(shù)：就是沒有數(shù)值就是0來填充
function zeroPadding(num, digit) {
var zero = '';
for(var i = 0; i < digit; i++) {
zero += '0';
}
return (zero + num).slice(-digit);
}
</script>
</body>
</html>4 復習vue的基本知識：
4.1 我是引用本地js/vue.min.js，放在js文件夾內(nèi)，也可以引用在線的，自己網(wǎng)上搜索，簡單。
4.2 <div id="clock">，這里是id="clock"，一般教程都是id="app"，注意這是一個可以自定義的，下面對應需要修改。
4.3 {{}}表示文本插值，運行{{message}}會被數(shù)據(jù)對象的message屬性替換。<!--view層：網(wǎng)頁渲染后看到的-->
4.4 js里面的vue是vue的特點：
/* ViewModel層,連接view和model層；
vue實例需要傳入一個選項對象，選項對象包括掛載對象，數(shù)據(jù)，方法，模生命周期鉤子（？）
el屬性指向view,表示把vue實例綁定某個dom元素*/
/* ViewModel層*/
var clock = new Vue({
// el就是對象：上面div里的id內(nèi)容，注意#符號
el: '#clock',
data: {
// data里面的內(nèi)容就是class的內(nèi)容，但是因為可變所以先是空的
// 先各自定義一個空的，后面利用函數(shù)獲得值
time: '',
date: ''
}
});
/*下面的是 Model層 ，此處省略*/4.5 動態(tài)獲取當前時間的函數(shù)定義，此處略，屬于html的js內(nèi)容，基本相同。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
