整合營銷服務商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          html頁面數(shù)字滾動效果

          tml頁面設置動態(tài)金額滾動效果!

          一開始加載頁面,數(shù)字都會過渡滾動到具體數(shù)字上!

          代碼:

          html:

          css:

          js:

          篇介紹了表單的使用,表單有很多控件,比如輸入框,密碼框、文本域,按鈕等。按類型可分如下:

          • 輸入類控件
          • 菜單類控件

          輸入類組件 —— input

          此類控件有很多種類型,使用<input type="類型">語法,常見類型如下:

          type 值

          含義

          text

          文字字段

          password

          密碼域,用戶看不到明文,以*代替

          radio

          單選按鈕

          checkbox

          多選按鈕

          button

          普通按鈕

          submit

          提交按鈕

          reset

          重置按鈕

          image

          圖像域,用圖像作為背景的提交按鈕

          hidden

          隱藏域,不可見的輸入框

          file

          文本域,用于上傳文件等非文本數(shù)據(jù)

          文本輸入框和密碼框

          除了顯示形式不一樣,其它屬性一樣,有以下屬性:

          • name —— 定義文字字段名稱,用于和其它控件區(qū)別,不能包含特殊字符,也不可使用html 標簽名稱
          • maxlength —— 定義文本框可輸入字符最大長度
          • size —— 定義文本框在頁面中顯示的長度
          • vaule —— 定義文本框中默認的值

          如下是文本輸入框和密碼框制作一個登錄表單

          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 還增加了多個新的輸入類型:

          • color
          • date
          • datetime
          • datetime-local
          • email
          • month
          • number
          • range
          • search
          • tel
          • time
          • url
          • week

          如下代碼:

          <!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)文件上傳功能。

          文本域 —— textarea

          除了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)容,基本相同。


          主站蜘蛛池模板: 免费一区二区无码东京热| 爆乳熟妇一区二区三区霸乳| 国产一区在线播放| 日韩人妻不卡一区二区三区 | 一区二区三区福利| 国产福利一区二区三区在线视频 | 国产激情一区二区三区在线观看| 亚洲av鲁丝一区二区三区| 成人无码一区二区三区| 亚洲国产精品一区二区三区久久| 国模无码一区二区三区| 久久精品免费一区二区| 亚洲午夜精品一区二区公牛电影院| 亚洲日韩激情无码一区| 精品一区二区在线观看| 亚洲综合无码AV一区二区| 国产裸体歌舞一区二区| 国产精品特级毛片一区二区三区| 中文字幕一区二区三| 久久精品国产一区| 亚欧色一区W666天堂| 中文字幕一区二区三区5566| 精品亚洲AV无码一区二区三区| 国产精品久久久久久麻豆一区| 精品无码日韩一区二区三区不卡 | 色多多免费视频观看区一区| 色婷婷亚洲一区二区三区| 免费高清在线影片一区| 国产av夜夜欢一区二区三区| 国产一区二区三区免费视频| 一区二区三区在线播放| 中文字幕一区二区三区精华液| 狠狠综合久久AV一区二区三区| 性色A码一区二区三区天美传媒 | 一区二区三区在线看| 久久精品国产一区| 麻豆AV天堂一区二区香蕉| 国产裸体舞一区二区三区| 精品一区二区三区高清免费观看| 国产乱码一区二区三区爽爽爽| 久久久精品人妻一区二区三区四|