24 HTML5表單基本控制元件(二)

密碼框

使用標籤，把標籤上的type屬性的值，設定為“password”，就可以建立密碼框。

密碼框和單行文字框非常像，只不過，在單行文字框裡面輸入的內容，會顯示出來，而在密碼框裡面輸入的內容，都會變成小黑點隱藏起來。

我還是接著在之前的“表單控制元件。html”這個頁面上繼續寫程式碼（從密碼框那裡看就行了）：

<！DOCTYPE html>Document<！—— 單行文字框 ——>

請輸入你的名字：

畢業學校：

郵寄地址：

所學專業：

<！—— 單選按鈕 ——>

<！—— 在HTML5規範下使用label標籤 ——> 性別：男女

<！—— 在HTML4規範下使用label標籤 ——> 血型：ABABO

<！—— 複選框 ——>

<！—— HTML5規範下使用label標籤 ——> 我愛好的體育專案：MMA羽毛球長跑游泳

<！—— 密碼框 ——>

請輸入密碼：

在瀏覽器中顯示效果如下：

我在瀏覽器頁面上的密碼框中隨便輸入密碼，會隱藏起來變為小黑點。

下拉選單

建立下拉選單需要使用標籤對兒裡面羅列的

跟無序列表和有序列表一樣：標籤中使用。

在標籤對兒之間的內容才是顯示給使用者看的。

每一個

我繼續在“表單控制元件。html”這個頁面上寫下拉選單的演示程式碼：

<！DOCTYPE html>Document<！—— 單行文字框 ——>

請輸入你的名字：

畢業學校：

郵寄地址：

所學專業：

<！—— 單選按鈕 ——>

<！—— 在HTML5規範下使用label標籤 ——> 性別：男女

<！—— 在HTML4規範下使用label標籤 ——> 血型：ABABO

<！—— 複選框 ——>

<！—— HTML5規範下使用label標籤 ——> 我愛好的體育專案：MMA羽毛球長跑游泳

<！—— 密碼框 ——>

請輸入密碼：

<！—— 下拉選單 ——>

請選擇你最喜歡的新能源汽車：特斯拉小鵬蔚來威馬理想雷丁比亞迪

在瀏覽器上顯示效果如下：

點選下拉選單，使用者可以在下拉選單中進行選擇。

多行文字框

使用標籤來建立多行文字框。

text是文字，area是區域，所以textarea就是文字區域，也就是多行文字框。

<textarea>的rows和cols屬性

rows和cols這兩個屬性的值是數字，沒有單位。

rows和cols這兩個屬性分別用來定義多行文字框的行數和列數，實際上就是定義多行文字框有多寬和多高。

我接著寫多行文字框的演示程式碼：

<！DOCTYPE html>Document<！—— 單行文字框 ——>

請輸入你的名字：

畢業學校：

郵寄地址：

所學專業：

<！—— 單選按鈕 ——>

<！—— 在HTML5規範下使用label標籤 ——> 性別：男女

<！—— 在HTML4規範下使用label標籤 ——> 血型：ABABO

<！—— 複選框 ——>

<！—— HTML5規範下使用label標籤 ——> 我愛好的體育專案：MMA羽毛球長跑游泳

<！—— 密碼框 ——>

請輸入密碼：

<！—— 下拉選單 ——>

請選擇你最喜歡的新能源汽車：特斯拉小鵬蔚來威馬理想雷丁比亞迪

<！—— 多行文字框 ——>

留言：

左右滑動檢視完整程式碼

當你在vscode中寫textarea然後按tab鍵時，會生成完整的標籤程式碼，生成的程式碼中預設會把cols的值給定為30，把rows的值給定為10。</p><div class="base-box"></div><p>在瀏覽器中顯示如下：</p><p align="center" class="arc-img-box"><img alt="24 HTML5表單基本控制元件(二)" data-isLoading="0" src="/static/img/blank.gif" data-src="https://img.iasui.com/upload/website_attach/5D0F9wDyto_SjaHP7j_itw4O2TThSx+QhB4swfHY-p=UJgXCsaiY6f9feKJATdUi4=VsD09qGTe1tgBF-97-n2jZqMADt5oo46okk0H4-H2xIUDITquWn0H+eJD4oG4U+SDkk0TX=HpfIaRktLg+m2HFpRJJ7dARii7jc0T3=efwjhHxn.jpeg" width="417" height="598" /></p><p>當然，你可以自己調整cols和rows的值，多行文字框的寬高就會隨著你的調整而變化。</p><div class="base-box"></div><p>在多行文字框中，使用者可以輸入內容。</p><p><strong>三種按鈕</strong></p><p>表單中常見的有三種按鈕，它們也都是用<input>標籤建立的，只不過type屬性值不同，就表示不同的按鈕。</p><p align="center" class="arc-img-box"><img alt="24 HTML5表單基本控制元件(二)" data-isLoading="0" src="/static/img/blank.gif" data-src="https://img.iasui.com/upload/website_attach/vtkQ3SODNTPzOqWw+vZEHvbF5DhkPSCu_EYzbbkLaZtjaquJjjLgPxnEj-ESc8OjAv+VdMkROT1I1iWz_zmPHxl8Gg1_tiPU5DcJ37gfOZ8SZ71J4Z1T3S=sjzbh1YuZIVbi37gR6znRKqpR_-YcaxUl9zd-bZ2vJzNZnGp9O-Z867WJVWVU+.jpeg" width="401" height="169" /></p><div class="base-box"></div><p>當<input>標籤的type屬性值為“button”時，就建立了一個普通按鈕。也可以直接用<button></button>標籤對兒來建立普通按鈕。button這個單詞就是按鈕的意思。</p><p>當<input>標籤的type屬性值為“submit”時，就建立了一個提交按鈕。點選這個按鈕時，表單將會提交到form標籤的action屬性值所指向的那個後臺網站。submit這個單詞就是提交的意思。</p><div class="base-box"></div><p>當<input>標籤的type屬性值為“reset”時，就建立了一個重置按鈕。點選這個按鈕時，表單中的所有控制元件都將被立即重置。reset這個單詞就是重置的意思。</p><p>按鈕上的value屬性的值，就是顯示在按鈕上的文字。</p><p>我接著寫這三種按鈕的演示程式碼：</p><p><！DOCTYPE html><htmllang=“en”><head><metacharset=“UTF-8”><metaname=“viewport”content=“width=device-width， initial-scale=1。0”><title>Document</title></head><body><formaction=“”method=“POST”><！—— 單行文字框 ——><p> 請輸入你的名字：<inputtype=“text”></p><p> 畢業學校：<inputtype=“text”value=“清華大學”></p><div class="base-box"></div><p> 郵寄地址：<inputtype=“text”placeholder=“請填寫正確的地址”></p><p> 所學專業：<inputtype=“text”value=“金融工程”disabled></p><！—— 單選按鈕 ——><p><！—— 在HTML5規範下使用label標籤 ——> 性別：<label><inputtype=“radio”name=“sex”value=“男”checked>男</label><label><inputtype=“radio”name=“sex”value=“女”>女</label></p><p><！—— 在HTML4規範下使用label標籤 ——> 血型：<inputtype=“radio”name=“bloodtype”checkedid=“A”><labelfor=“A”>A</label><inputtype=“radio”name=“bloodtype”id=“B”><labelfor=“B”>B</label><inputtype=“radio”name=“bloodtype”id=“AB”><labelfor=“AB”>AB</label><inputtype=“radio”name=“bloodtype”id=“O”><labelfor=“O”>O</label></p><！—— 複選框 ——><p><！—— HTML5規範下使用label標籤 ——> 我愛好的體育專案：<label><inputtype=“checkbox”name=“hobby”value=“MMA”>MMA</label><label><inputtype=“checkbox”name=“hobby”value=“羽毛球”>羽毛球</label><label><inputtype=“checkbox”name=“hobby”value=“長跑”>長跑</label><label><inputtype=“checkbox”name=“hobby”value=“游泳”>游泳</label></p><！—— 密碼框 ——><p> 請輸入密碼：<inputtype=“password”></p><！—— 下拉選單 ——><p> 請選擇你最喜歡的新能源汽車：<selectname=“”id=“”><optionvalue=“特斯拉”>特斯拉</option><optionvalue=“小鵬”>小鵬</option><optionvalue=“蔚來”>蔚來</option><optionvalue=“威馬”>威馬</option><optionvalue=“理想”>理想</option><optionvalue=“雷丁”>雷丁</option><optionvalue=“比亞迪”>比亞迪</option></select></p><！—— 多行文字框 ——><p> 留言：<textareaname=“”id=“”cols=“30”rows=“10”>

<！—— 三種按鈕 ——>

<！——普通按鈕的簡化寫法——>

<！——普通按鈕的寫法——>

<！——提交按鈕——>

<！——重置按鈕——>

學習前端是比較好的一個入門網際網路技術的途徑。

因為所見即所得，前端程式碼寫出來，能很方便的看到效果。

前端入門容易，學習曲線平緩，非常適合小白人士入門學習。

前端需求也比較大，因為不論時代和科技怎麼發展，使用者總是需要一個終端裝置，用眼睛去看、去操作終端裝置上的軟體應用。哪怕科技發展到能用意念控制行為的地步，也得有個能看的見的介面吧。只要有終端的需求，就會有前端的用武之地。（我說的不一定對哦）

從前端入手，也是可以成長為時下最流行的全棧工程師的哦！

也就是說，現在前端工程師必學的node。js，是可以做後端開發的，學了這一套知識和體系，是可以從前端到後端，獨立完成一個專案的。

前端技術可不僅僅是做網頁的，除了可以開發網站，還可以開發微信小程式，可以開發webAPP，混合APP也是需要前端的，網站、小程式、APP的管理後臺也都是需要前端的。

從前端入手，相對Python可能更好找工作，大中小公司都用得上。當然Python也很好，現在很熱，因為它跟資料分析、人工智慧強相關，但是中小公司，一般沒有能力也不會涉及人工智慧。而且人工智慧並不是光會Python就行的，那個門檻還是很高的。

現在來說，web全棧開發也是很流行，需求很大的，可以走java全棧路線、Python全棧路線、PHP全棧路線、也可以走前端全棧路線。

不論哪種全棧路線，也都需要懂前端啊。前端全棧路線的話，後端用node。js就行，node。js就需要學好前端的JavaScript技術。

前端體系學完之後，我們可以再一起繼續學習Python。

是不是很期待。

24 HTML5表單基本控制元件(二)

24 HTML5表單基本控制元件(二)

相關文章

推薦文章