整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          HTML表單及其Input輸入類型

          TML 表單用于搜集不同類型的用戶輸入。HTML5 Input,擁有多個新的表單輸入類型,提供了更好的輸入控制和驗證,今天將為大家帶來HTML中的表單及其input輸入類型。

          一、HTML表單

          1、HTML表單用于收集不同類型的用戶輸入,是一個包含表單元素的區域并且允許用戶在表單中輸入內容,比如文本域(textarea)、下拉列表、單選框(radio=buttons)、復選框(checkboxes)等。

          2、表單使用標簽<form>來設置,示例:

          運行結果:

          二、HTML表單屬性:

          1、HTML表單包含表單元素,表單元素是指不同類型的input元素、復選框、單選按鈕、提交按鈕等。

          2、action屬性

          在上面的示例中出現了action屬性,action屬性定義在提交表單執行的動作,向服務器提交表單的通常做法是使用提交按鈕。

          通常,表單會被提交到web服務器上的網頁,上面的例子中,則指定了某個服務器腳本來處理被提交表單。

          如果省略 action 屬性,則 action 會被設置為當前頁面。

          3、method 屬性

          method屬性規定在提交表單時所用的 HTTP 方法(GET 或 POST):

          如果表單提交是被動的(比如搜索引擎查詢),并且沒有敏感信息,使用get。

          如果表單正在更新數據,或者包含敏感信息(例如密碼),使用post。

          4、如果要正確地被提交,每個輸入字段必須設置一個 name 屬性,示例:

          <!DOCTYPE html>

          <html>

          <body>

          <form action="/demo/demo_form.asp">

          First name:<br>

          <input type="text" name="Firstname" value="Mickey">

          <br>

          Last name:<br>

          <input type="text" name="lastname" value="Mouse">

          <br><br>

          <input type="submit" value="Submit">

          </form>

          <p>如果您點擊提交,表單數據會被發送到名為 demo_form.asp 的頁面。</p>

          <p>first name 不會被提交,因為此 input 元素沒有 name 屬性。</p>

          </body>

          </html>

          運行結果:

          5、target 屬性

          target 屬性規定提交表單后在何處顯示響應,target 屬性可設置以下值之一:

          默認值為 _self,這意味著響應將在當前窗口中打開。

          6、Autocomplete 屬性

          autocomplete 屬性規定表單是否應打開自動完成功能。

          啟用自動完成功能后,瀏覽器會根據用戶之前輸入的值自動填寫值,示例:

          運行結果:


          7、所有<form>屬性的列表:


          三、HTML表單元素:

          1、<input>元素是最重要的表單元素,有很多的形態,根據不同的type屬性,例如:

          ① 文本輸入(text),示例:

          <!DOCTYPE html>

          <html>

          <body>

          <form>

          First name:<br>

          <input type="text" name="firstname">

          <br>

          Last name:<br>

          <input type="text" name="lastname">

          </form>

          <p>請注意表單本身是不可見的。</p>

          <p>同時請注意文本字段的默認寬度是 20 個字符。</p>

          </body>

          </html>

          運行結果:

          ② 單選按鈕輸入(radio),示例:

          <!DOCTYPE html>

          <html>

          <body>

          <form>

          <input type="radio" name="sex" value="male" checked>Male

          <br>

          <input type="radio" name="sex" value="female">Female

          </form>

          </body>

          </html>

          運行結果:

          ③ 提交按鈕(submit),示例:

          <!DOCTYPE html>

          <html>

          <body>

          <form action="/demo/demo_form.asp">

          First name:<br>

          <input type="text" name="firstname" value="Mickey">

          <br>

          Last name:<br>

          <input type="text" name="lastname" value="Mouse">

          <br><br>

          <input type="submit" value="Submit">

          </form>

          <p>如果您點擊提交,表單數據會被發送到名為 demo_form.asp 的頁面。</p>

          </body>

          </html>

          運行結果:

          2、<select>元素

          <select>元素定義下拉列表,示例:

          <!DOCTYPE html>

          <html>

          <body>

          <form action="/demo/demo_form.asp">

          <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>

          <input type="submit">

          </form>

          </body>

          </html>

          運行結果:

          3、<fieldset>元素

          <fieldset>元素組合表單中的相關數據

          <legend>元素為<fieldset>元素定義標題,示例:

          <!DOCTYPE html>

          <html>

          <body>

          <form action="/demo/demo_form.asp">

          <fieldset>

          <legend>Personal information:</legend>

          First name:<br>

          <input type="text" name="firstname" value="Mickey">

          <br>

          Last name:<br>

          <input type="text" name="lastname" value="Mouse">

          <br><br>

          <input type="submit" value="Submit">

          </fieldset>

          </form>

          </body>

          </html>

          運行結果:

          4、<textarea> 元素

          <textarea> 元素定義多行輸入字段(文本域)、示例:

          <!DOCTYPE html>

          <html>

          <body>

          <form>

          <textarea name="message" rows="10" cols="30">

          The cat was playing in the garden.

          </textarea>

          </form>

          </body>

          </html>

          運行結果:

          5、HTML5<datalist>元素

          <datalist> 元素為 <input> 元素規定預定義選項列表。

          用戶會在他們輸入數據時看到預定義選項的下拉列表。

          <input> 元素的 list 屬性必須引用 <datalist> 元素的 id 屬性,示例:

          <!DOCTYPE html>

          <html>

          <body>

          <form action="/demo/demo_form.asp">

          <input list="browsers" name="browser">

          <datalist id="browsers">

          <option value="Internet Explorer">

          <option value="Firefox">

          <option value="Chrome">

          <option value="Opera">

          <option value="Safari">

          </datalist>

          <input type="submit">

          </form>

          </body>

          </html>

          運行結果:

          四、HTML表單輸入類型

          輸入類型

          定義

          text

          定義供文本輸入的單行輸入字段

          password

          定義密碼字段

          submit

          定義提交表單數據至表單處理程序的按鈕

          radio

          定義單選按鈕

          checkbox

          定義復選框

          <input>中的type:

          類型

          定義

          radio

          定義單選按鈕

          checkbox

          定義復選框

          button

          定義按鈕

          number

          用于應該包含數字值的輸入字段

          date

          用于應該包含日期的輸入字段

          color

          用于應該包含顏色的輸入字段

          range

          用于應該包含一定范圍內的值的輸入字段

          month

          允許用戶選擇月份和年份

          week

          允許用戶選擇周和年

          time

          允許用戶選擇時間(無時區)

          datetime

          允許用戶選擇日期和時間(有時區)

          datetime-local

          允許用戶選擇日期和時間(無時區)

          email

          用于應該包含電子郵件地址的輸入字段

          search

          用于搜索字段(搜索字段的表現類似常規文本字段)

          tel

          用于應該包含電話號碼的輸入字段

          url

          用于應該包含 URL 地址的輸入字段


          輸入限制:

          這就是有關HTML表單的大概內容了,希望這篇HTML的表單及其input輸入類型的知識點能對大家有所幫助。

          有下拉列表的表單

          題目只能有30個字,不能寫全,其實今天我們要學習的內容有三個,第一,下拉列表表單,第二,多行文字輸入表單,第三,數據集表單。

          開始學習吧!

          前天和昨天我們在《HTML表單元素初識1——零基礎自學網頁制作》和《HTML表單元素初識2——零基礎自學網頁制作》中基本上把<input/>標簽的type屬性里不同的值進行了講解與實踐,今天我們來學習其他包含在<form></form>之間的元素。

          帶有下拉列表的表單

          我們在一些網站填寫注冊信息時,經常會遇到選擇"生活所在地"的操作,因為中國的地名是固定的,因此頁面會為我們提供一個下拉列表選項,我們直接點選即可,就不需要輸入文字了,這樣操作的好處在于不會出現拼寫錯誤。例如:

          寫這個功能我們需要介紹一組新標簽<select></select>。"select"(選擇)。在這個標簽中再添加<option></option>。"option"(選項)。這樣就可以寫出帶有下拉列表的表單了,示例代碼如下:

          <select><option></option></select>

          這段代碼我們繼續在昨天的"表單.html"文件中添加即可,在<input type = "image" src = "img/示例圖片/submit.jpg"/><br>這段代碼之前即可!與這個圖片提交按鈕共用一個<form></form>標簽!

          下面我們為多選表單添加名稱,示例代碼如下:

          請選擇省份<select><option></option></select>

          下面我們添加不同選項,示例代碼如下:

          請選擇省份
            <select >
            <option >河北</option>
            <option >山東</option>
            <option >河南</option>
            <option >海南</option>
            <option >江蘇</option>
            <option >安徽</option>
            </select>
            <br><br>

          為了規范起見,我們為表單信息添加name和value屬性,示例代碼如下:

          請選擇省份
            <select name = "province">
            <option value="Hebei">河北</option>
            <option value="Shandong">山東</option>
            <option value="Henan">河南</option>
            <option value="Hainan">海南</option>
            <option value="Jiangsu">江蘇</option>
            <option value="Anhui">安徽</option>
            </select>
            <br><br>

          大家要注意的是,在下拉列表表單中,name寫在<select>中,value寫在<option>中。

          頁面效果如下:

          這里告訴大家一個規律,下拉列表表單默認顯示第一個<option></option>中的文字內容。

          如果您想改變這個默認顯示,請在需要顯示的<option>中添加selected屬性,并賦值為"selected"。

          示例代碼如下:

          請選擇省份
            <select name = "province">
            <option value="Hebei">河北</option>
            <option value="Shandong">山東</option>
            <option value="Henan" selected="selected">河南</option>
           <!--選中這個選項--><option value="Hainan">海南</option><option value="Jiangsu">江蘇</option><option value="Anhui">安徽</option></select><br><br>

          頁面效果如圖:

          多行文字輸入表單

          我們在西瓜視頻上發布視頻時會被要求填寫視頻描述,頁面中的輸入框不是像下圖這么短的單行輸入框。

          而是多行輸入框,如圖:

          使用<textarea></textarea>標簽即可添加這樣的輸入框,不過要設置row(列)和cols(行)屬性的數值。示例代碼如下:

          <br>請簡要描述您的劇本的情節<br><textarea row="3" cols="20"></textarea><br>

          這段代碼添加到</select><br><br>之后,與其共同使用一個<form></form>標簽。

          下面我們為這個多行輸入框添加一些提示和限制。

          首先,添加提示文字,和type="text"的<input/>標簽一樣,都是使用placeholder屬性。

          第二,我們限制一下字數,使用maxlength(最大長度)屬性。

          第三,在頁面加載完成后,直接讓光標停留在輸入框中,使用autofocus屬性。

          下面看看如何寫吧,示例代碼如下:(不要忘記寫好name屬性?。?/p>

          <br>
          請簡要描述您的劇本的情節<br>
          <textarea row="3" cols="20" name ="storyOutLine"placeholder="最多輸入80字"maxlength="80"autofocus></textarea><br>

          頁面效果如圖:

          如果刷新頁面不能正確顯示,請嘗試關閉后重新打開!

          數據集表單

          數據集表單實際上就是一個將不同選項或信息打包上傳的設置。

          當一組表單元素放到 <fieldset> 標簽內時,瀏覽器會以特殊方式來顯示它們,它們可能有特殊的邊界、3D 效果,或者甚至可創建一個子表單來處理這些元素。(W3school)

          這個數據集有三個部分組成,首先是<fliedset></fliedset>,這個標簽不會顯示,只是告訴瀏覽器這里的數據要打包。

          第二是<legend></legend>,"legend"(說明),這里添加數據集名稱。

          第三就是我們之前學到的那些標簽了。

          示例代碼如下:

          <fliedset> <legend>信息打包</legend> </fliedset>

          下面我們使用這段代碼把form2打包一下吧。示例代碼如下:

          <form>
            <fieldset><!--開始-->
            <legend>信息打包</legend><br>
            <!--標題-->興趣愛好:<br>
            <input type = "checkbox" name = "hobby" value = "reading"/>讀書
            <input type = "checkbox" name = "hobby" value = "film"/>電影
            <input type = "checkbox" name = "hobby" value = "painting"/>繪畫
            <input type = "checkbox" name = "hobby" value = "music"/>音樂
            <br>
            最高學歷:<br>
            <input type = "radio" name = "education" value = "highSchool"/>高中
            <input type = "radio" name = "education" value = "bachelor"/>本科
            <input type = "radio" name = "education" value = "master"/>碩士
            <input type = "radio" name = "education" value = "doctor"/>博士
            <br>
            請選擇省份
            <select name = "province">
            <option value="Hebei">河北</option>
            <option value="Shandong">山東</option>
            <option value="Henan" selected="selected">河南</option><!--選中這個選項-->
            <option value="Hainan">海南</option>
            <option value="Jiangsu">江蘇</option>
            <option value="Anhui">安徽</option>
            </select>
            <br><br><br>
            請簡要描述您的劇本的情節<br>
            <textarea row="3" cols="20" name ="storyOutLine"placeholder="最多輸入80字"maxlength="80"autofocus></textarea>
            <br>
            </fieldset><!--結尾-->
            <input type = "image" src = "img/示例圖片/submit.jpg"/><br>
            <input type="reset" /><br>
            <input type = "submit" value = "submit"/>
            </form>

          頁面效果如下:

          今天的內容結束了!

          如果您喜歡我的教程請關注我,點贊也能讓我充滿動力!

          HTML完整學習目錄

          HTML序章(學習目的、對象、基本概念)——零基礎自學網頁制作

          HTML是什么?——零基礎自學網頁制作

          第一個HTML頁面如何寫?——零基礎自學網頁制作

          HTML頁面中head標簽有啥用?——零基礎自學網頁制作

          初識meta標簽與SEO——零基礎自學網頁制作

          HTML中的元素使用方法1——零基礎自學網頁制作

          HTML中的元素使用方法2——零基礎自學網頁制作

          HTML元素中的屬性1——零基礎自學網頁制作

          HTML元素中的屬性2(路徑詳解)——零基礎自學網頁制作

          使用HTML添加表格1(基本元素)——零基礎自學網頁制作

          使用HTML添加表格2(表格頭部與腳部)——零基礎自學網頁制作

          使用HTML添加表格3(間距與顏色)——零基礎自學網頁制作

          使用HTML添加表格4(行顏色與表格嵌套)——零基礎自學網頁制作

          16進制顏色表示與RGB色彩模型——零基礎自學網頁制作

          HTML中的塊級元素與內聯元素——零基礎自學網頁制作

          初識HTML中的<div>塊元素——零基礎自學網頁制作

          在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作

          封閉在家學網頁制作!為頁面嵌入PDF文件——零基礎自學網頁制作

          HTML表單元素初識1——零基礎自學網頁制作

          HTML表單元素初識2——零基礎自學網頁制作

          HTML表單3(下拉列表、多行文字輸入)——零基礎自學網頁制作

          HTML表單4(form的action、method屬性)——零基礎自學網頁制作

          HTML列表制作講解——零基礎自學網頁制作

          為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作

          音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作

          HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作

          章中,將使用一個表單內的各種元素來開發一個簡單網站的用戶意見反饋頁面。

          反饋表單非常簡單,通常包含三個部分,需要在頁面上方給出標題,標題下方是正文部分,即表單元素,最下方是表單元素提交按鈕。在設計這個頁面時,需要把“用戶注冊”標題設置成H1大小,正文使用p來限制表單元素。

          具體操作步驟如下。

          (1)構建HTML頁面

          構建HTML頁面,實現表單內容,在<body>標簽中加入以下代碼,代碼如下。


          (2)在瀏覽器中瀏覽效果

          在瀏覽器中瀏覽效果如圖所示,可以看到創建了一個用戶反饋表單,包含一個標題“用戶注冊”、“姓名”、“性別”、“年齡”、“聯系電話”、“電子郵件”、“聯系地址”、“意見反饋” 等輸入框和“提交”按鈕等。


          舉一反三

          通過表單的學習,可以實現各種簡單表單的設計、制作。參考所學知識,完成下圖所示表單的設計。


          主站蜘蛛池模板: 无码国产精品久久一区免费| 日韩精品无码一区二区中文字幕| 一区二区免费视频| 波多野结衣中文一区| 亚洲一区二区三区深夜天堂| 久久se精品一区精品二区国产| 国产精品一区二区香蕉| 国产福利一区二区三区| 亚洲AV无码一区二区三区系列| www.亚洲一区| 亚洲片一区二区三区| 蜜桃视频一区二区| 视频精品一区二区三区| 国产精品乱码一区二区三| 精品福利视频一区二区三区 | 麻豆亚洲av熟女国产一区二| 三上悠亚亚洲一区高清| 合区精品久久久中文字幕一区 | asmr国产一区在线| 蜜桃视频一区二区三区| 一区二区三区免费视频观看| 无码人妻一区二区三区在线水卜樱 | 日韩视频免费一区二区三区| 欧美亚洲精品一区二区| 亚洲av无码一区二区三区天堂| 亚洲一区动漫卡通在线播放| 2020天堂中文字幕一区在线观| 色窝窝无码一区二区三区| 人妻体内射精一区二区三区| 69福利视频一区二区| 中文字幕乱码亚洲精品一区| 国产香蕉一区二区三区在线视频 | 少妇特黄A一区二区三区| 亚洲无删减国产精品一区| 在线日产精品一区| 国产一区二区三区电影| 国产精品成人一区二区| 国产自产V一区二区三区C| 91在线精品亚洲一区二区| 国产乱码精品一区二区三区| 视频在线一区二区三区|