日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

歡迎訪問 生活随笔!

生活随笔

當(dāng)前位置: 首頁 >

html中input、label、form、textarea、select

發(fā)布時間:2025/3/15 24 豆豆
生活随笔 收集整理的這篇文章主要介紹了 html中input、label、form、textarea、select 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

表單input:
表單是用來收集信息的,由表單控件(表單元素)、提示信息、表單域構(gòu)成。

input控件的屬性及值:

除以上屬性外,input元素type屬性還有一個number屬性值,此為僅可以填數(shù)字,默認(rèn)是可以選擇或者填寫任意數(shù)字,但是當(dāng)type屬性為number屬性值時,可以使用max和min屬性來限制數(shù)字的取值范圍,input更多屬性見HTML5

<input type="number" min="0"> <!-- min屬性限定最小值為0 -->

label標(biāo)簽:

label標(biāo)簽是為input標(biāo)簽服務(wù)的,用于綁定一個表單元素, 當(dāng)點(diǎn)擊label標(biāo)簽的時候, 被綁定的表單元素就會獲得輸入焦點(diǎn)

<label> <!-- 1、直接使用label標(biāo)簽包裹要點(diǎn)擊的元素獲得焦點(diǎn) -->姓名:<input type="text"></label><label for="name">姓名:</label> <!-- 2、使用label標(biāo)簽的for屬性找input元素獲得焦點(diǎn) --><input id="name" type="text"/>

表單域form:

form元素用于創(chuàng)建一個表單,form中的所有內(nèi)容都會被提交給服務(wù)器;默認(rèn)form標(biāo)簽中需要有一個submit按鈕,如果form里面沒有submit按鈕,那么可以使用button中type屬性為submit的button按鈕,這個buttont按鈕可能不在form表單中,此時可以給type屬性值為submit的button添加form屬性,值為form表單的id值,如:

<form action="" method="get" name="" id="userform"> <!-- action屬性是指定表單提交給后端的地址,method屬性設(shè)置提交方式,其屬性值有post和get,name屬性用來給表單域定義名字,用于區(qū)分表單域 -->姓名:<input type="text">年齡:<input type="number" min="0"></form><button type="submit" form="userform">提交</button>

文本域textarea:

input元素只能顯示一行內(nèi)容,textarea元素可以顯示多行,一般做留言效果使用,常常被稱為富文本域。

<!-- rows屬性限定行數(shù),當(dāng)行數(shù)超過限定后會出現(xiàn)滾動條,cols屬性限定的是列數(shù),當(dāng)超過限定后會換行。 --><textarea cols="20" rows="10"></textarea>

UEditor:
在實際開發(fā)中如果需要用到比較復(fù)雜的富文本域(類似word的,可以上傳視頻圖片等功能)推薦使用第三方插件,這里推薦大家一款使用的富文本插件:UEditor,使用它可以在網(wǎng)頁中實現(xiàn)類似word等編輯,如果想要了解更多及方法請查閱官方文檔:http://fex.baidu.com/ueditor/,當(dāng)然類似的富文本編輯器還有很多,如:CKeditor:https://ckeditor.com/等

富文本編輯器可以自己做,其原理是利用document的execCommand()方法,這個方法實際開發(fā)中很少用,已經(jīng)廢棄,所以一般很少有人了解,如果想要了解更多,可閱讀官方文檔:https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand

下拉列表(下拉菜單)select:

<body><select name="" id=""><optgroup value="" label="分組1"><!-- optgroup標(biāo)簽用來分組 -->><option value="">測試1</option><option value="">測試2</option><option value="">測試3</option></optgroup><optgroup value="" label="分組2"><option value="">選項1</option> <!-- select默認(rèn)選擇第一個option,當(dāng)給option加selected屬性時,則會選中此項顯示 --><option value="" selected="selected">選項2</option> <!-- selected屬性的selected屬性值可以省略,其效果不變--><option value="">選項3</option></optgroup></select></body>

塊引用標(biāo)簽:

有的時候會引用名人名言等,此時建議使用引用標(biāo)簽,引用標(biāo)簽分為長引用和短引用兩種,長引用標(biāo)簽效果是插入換行和外邊距,短引用標(biāo)簽的效果是加上虛擬的引號。

<blockquote>海上生明月,天涯共此時。</blockquote><!-- 長引用標(biāo)簽 --><q>引號</q><!-- 段引用會給內(nèi)容加上虛擬的引號,這個引號根本不存在。 -->


提示:本文圖片等素材來源于網(wǎng)絡(luò),若有侵權(quán),請發(fā)郵件至郵箱:810665436@qq.com聯(lián)系筆者 刪除。
筆者:苦海

總結(jié)

以上是生活随笔為你收集整理的html中input、label、form、textarea、select的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯,歡迎將生活随笔推薦給好友。