htmlcss個(gè)人網(wǎng)站網(wǎng)頁制作(htmlcss簡單的網(wǎng)頁制作)

2024-04-16    分類： 網(wǎng)站建設(shè)

表單元素屬性2

為了不再被疑似涉嫌低俗，我只能給大家提供這種圖片了，耐得住寂寞才能學(xué)有所成！吸引人的東西未必珍貴。

昨天我們學(xué)習(xí)了《HTML表單元素初識(shí)1——零基礎(chǔ)自學(xué)網(wǎng)頁制作》（目錄在結(jié)尾），大家通過學(xué)習(xí)對(duì)HTML頁面中的表單元素的基本寫法已經(jīng)非常熟悉了。同時(shí)也學(xué)會(huì)了通過變換<input/>標(biāo)簽中的type屬性的值為表單賦予不同的功能，例如輸入文本和建立多選表單。期間，對(duì)name與value這兩個(gè)屬性的作用與特點(diǎn)進(jìn)行了闡釋。今天我們繼續(xù)學(xué)習(xí)新的表單內(nèi)容。建立單選表單：

單選表單把<input/>標(biāo)簽的type屬性修改為"radio"（收音機(jī)），為什么單選表單使用"收音機(jī)"這個(gè)詞呢？其實(shí)道理很簡單，收音機(jī)調(diào)頻旋鈕是對(duì)應(yīng)角度對(duì)應(yīng)相應(yīng)調(diào)頻，不可能一個(gè)角度對(duì)應(yīng)兩個(gè)調(diào)頻，所以選這個(gè)就不能選其他的表單中的type屬性使用"radio"這個(gè)詞表示，是不是很形象。

示例代碼如下：

<form> 最高學(xué)歷：<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> <input type = "submit" value = "submit"/></form>

因?yàn)槊鑼懙氖亲罡邔W(xué)歷，一般人最高學(xué)歷只有一個(gè)，不可能又是學(xué)士又是博士，因此使用單選表單。

向服務(wù)器提交時(shí)，name叫做"education"（教育），value對(duì)應(yīng)不同層次。

頁面效果如下：

大家可以點(diǎn)點(diǎn)試試，每次只能有一個(gè)被選中。如圖：綜合練習(xí)：

到這為止，我們把之前零散的代碼拼湊一下看看效果吧！

<!DOCTYPE HTML> <html> <head> <title>表單 </title> </head> <body> <form> 會(huì)員名稱： <input type = "text" placeholder = "請(qǐng)輸入英文或漢語拼音" name="memberName"/><br> 會(huì)員密碼： <input type = "text" placeholder = "請(qǐng)輸入英文字母、特殊符號(hào)、數(shù)字" name="passWord"/><br> 確認(rèn)密碼： <input type = "text" name="confirmPassWord"/><br> <input type = "submit" value = "提交"/><br> </form> <hr> <form> 興趣愛好： <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> 最高學(xué)歷：<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> <input type = "submit" value = "submit"/> </form> </body> </html>

頁面效果如下：

密碼輸入：我們?cè)谑褂蒙鲜霰韱屋斎朊艽a時(shí)發(fā)現(xiàn)，密碼時(shí)實(shí)時(shí)顯示在輸入框中，這一點(diǎn)是不安全的，如圖：

如何讓密碼隱藏呢？其實(shí)看過上一篇中type屬性列表的小伙伴肯定猜到了，把type從"text"改為password。示例代碼如下：

會(huì)員密碼：<input type = "password" placeholder = "請(qǐng)輸入英文字母、特殊符號(hào)、數(shù)字" name="passWord"/><br>確認(rèn)密碼：<input type = "password" name="confirmPassWord"/><br>

頁面效果如下：上傳文件：

使用type="file"可以上傳文件！

示例代碼如下：寫在"submit"的上面即可。

<input type = "file"/><br><input type = "submit" value = "submit"/>

頁面效果如下：

點(diǎn)擊"瀏覽"看下效果：

神奇！使用圖片制作按鈕

：將type="image"即可，代碼如下：

<input type = "image" src = "img/示例圖片/submit.jpg"/><br>

頁面效果如下：用一個(gè)src導(dǎo)入圖片即可。

示例圖片：路徑自行設(shè)置即可！為表單設(shè)置一個(gè)重置按鈕

：如果用戶打算重置表單內(nèi)容后從新填寫，我們可以給他這樣一個(gè)按鈕：

<input type="reset" /><br>

頁面如圖所示：

大家要注意的是這個(gè)"重置"按鈕的作用范圍僅僅是它所在的<form></form>標(biāo)簽之間！

舉個(gè)例子，如圖：

下面我們點(diǎn)擊"重置"后效果如下：

form1中的內(nèi)容沒有被清空，"重置"按鈕所在的form2內(nèi)容被清空了！

type屬性值講解我們到此結(jié)束了，hidden值這里先不給大家介紹，以后有機(jī)會(huì)再細(xì)說。

button值以后在JavaScript部分還會(huì)細(xì)說，這里也先略過。

除了<input/>外，還有其他一些標(biāo)簽，例如<select>或<textarea>等有趣且實(shí)用的標(biāo)簽，我們明天再學(xué)習(xí)吧！

今天的內(nèi)容先到這里。希望大家看完之后可以寫寫代碼進(jìn)行實(shí)操。代碼這種東西即使再簡單，寫過和沒寫過的體會(huì)也是不一樣的。這個(gè)部分的代碼使用"文本編輯器"就可以實(shí)踐。具體操作請(qǐng)?jiān)斠姟丁贰?/p>

碎片化的知識(shí)其實(shí)對(duì)人并沒有多大作用，但是我們的時(shí)間在現(xiàn)代化的生活節(jié)奏中被撕地越來越碎，因此我希望大家可以利用碎片時(shí)間來學(xué)習(xí)完整的知識(shí)，所以，以短篇的形式，每天20分鐘左右，通過積少成多的辦法為大家提供零基礎(chǔ)頁面制作的教程體系是我的主要目的。希望大家學(xué)有所成！

喜歡我的教程的小伙伴請(qǐng)關(guān)注我，點(diǎn)贊也會(huì)讓我充滿動(dòng)力！

喜歡的小伙伴請(qǐng)關(guān)注和轉(zhuǎn)發(fā)，閱讀中遇到任何問題請(qǐng)給我留言，如有疏漏或錯(cuò)誤歡迎大家斧正，不勝感激！

HTML完整學(xué)習(xí)目錄

HTML序章（學(xué)習(xí)目的、對(duì)象、基本概念）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

第一個(gè)HTML頁面如何寫？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML頁面中head標(biāo)簽有啥用？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

初識(shí)meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格1（基本元素）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格3（間距與顏色）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

16進(jìn)制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的塊級(jí)元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作

初識(shí)HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作

封閉在家學(xué)網(wǎng)頁制作！為頁面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單元素初識(shí)1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單元素初識(shí)2——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單4（form的action、method屬性）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁制作

為HTML頁面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作

音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中使用<a>標(biāo)簽實(shí)現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁制作

網(wǎng)站名稱：htmlcss個(gè)人網(wǎng)站網(wǎng)頁制作(htmlcss簡單的網(wǎng)頁制作)
網(wǎng)站地址：http://www.muchs.cn/news34/323834.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、面包屑導(dǎo)航、軟件開發(fā)、網(wǎng)站設(shè)計(jì)公司、微信公眾號(hào)、域名注冊(cè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

營銷型網(wǎng)站建設(shè)