前端筆記--HTML-4

輸入限制

disabled
規(guī)定輸入字段應(yīng)該被禁用尉共。被禁用的元素是不可用和不可點擊的。被禁用的元素不會被提交

max
規(guī)定輸入字段的最大值捧存。

maxlength
規(guī)定輸入字段的最大字符數(shù)粪躬。

min
規(guī)定輸入字段的最小值。

pattern
規(guī)定通過其檢查輸入值的正則表達(dá)式昔穴。

readonly
規(guī)定輸入字段為只讀(無法修改)镰官。

required
規(guī)定輸入字段是必需的(必需填寫)。

size
規(guī)定輸入字段的寬度(以字符計)吗货,體現(xiàn)為文本框的寬度泳唠。

step
規(guī)定輸入字段的合法數(shù)字間隔。

value
規(guī)定輸入字段的默認(rèn)值宙搬。

<body>

<form action="">
First name:<br>
<input type="text" name="firstname" value ="John" readonly>
</form>
<br>
<form action="">
First name:<br>
<input type="text" name="firstname" value ="Haha" disabled>
</form>

</body>

運行:
HTML5 屬性
HTML5 為 <input> 增加了如下屬性:

autocomplete 屬性
autocomplete 屬性規(guī)定表單或輸入字段是否應(yīng)該自動完成笨腥。
當(dāng)自動完成開啟,瀏覽器會基于用戶之前的輸入值自動填寫值勇垛。
提示:您可以把表單的 autocomplete 設(shè)置為 on脖母,同時把特定的輸入字段設(shè)置為 off,反之亦然闲孤。
autocomplete 屬性適用于 <form> 以及如下 <input> 類型:text谆级、search、url讼积、tel肥照、email、password勤众、datepickers建峭、range 以及 color。

<body>

<form action="/example/html5/demo_form.asp" method="get" autocomplete="on">
First name:<input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>

<p>填寫并提交表單决摧,然后重新加載該頁面亿蒸,看看自動完成功能是如何工作的凑兰。</p>
<p>注意,表單的自動完成功能是打開的边锁,但是 e-mail 字段的自動完成功能是關(guān)閉的姑食。</p>

</body>

novalidate 屬性
novalidate 屬性屬于 <form> 屬性。
如果設(shè)置茅坛,則 novalidate 規(guī)定在提交表單時不對表單數(shù)據(jù)進(jìn)行驗證音半。

autofocus 屬性
autofocus 屬性是布爾屬性。
如果設(shè)置贡蓖,則規(guī)定當(dāng)頁面加載時 <input> 元素應(yīng)該自動獲得焦點曹鸠。

form 屬性
form 屬性規(guī)定 <input> 元素所屬的一個或多個表單。
提示:如需引用一個以上的表單斥铺,請使用空格分隔的表單 id 列表彻桃。

<body>

<form action="/example/html5/demo_form.asp" method="get" id="form1">
First name: <input type="text" name="fname" /><br />
<input type="submit" value="提交" />
</form>

<p>下面的 "Last name" 字段位于 form 元素之外,但仍然是表單的一部分晾蜘。</p>

Last name: <input type="text" name="lname" form="form1" />

</body>

formaction 屬性
formaction 屬性規(guī)定當(dāng)提交表單時處理該輸入控件的文件的 URL邻眷。
formaction 屬性覆蓋 <form> 元素的 action 屬性。
formaction 屬性適用于 type="submit" 以及 type="image"。

<body>

<form action="/example/html5/demo_form.asp" method="get">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="提交" /><br />
<input type="submit" formaction="/example/html5/demo_admin.asp" value="以管理員身份提交" />
</form>

</body>

formenctype 屬性
formenctype 屬性規(guī)定當(dāng)把表單數(shù)據(jù)(form-data)提交至服務(wù)器時如何對其進(jìn)行編碼(僅針對 method="post" 的表單)。
formenctype 屬性覆蓋 <form> 元素的 enctype 屬性类少。
formenctype 屬性適用于 type="submit" 以及 type="image"。

<body>

<form action="/example/html5/demo_post_enctype.asp" method="post">
  First name: <input type="text" name="fname" /><br />
<input type="submit" value="提交" />
<input type="submit" formenctype="multipart/form-data" value="以 Multipart/form-data 編碼提交" />
</form>

</body>

formmethod 屬性
formmethod 屬性定義用以向 action URL 發(fā)送表單數(shù)據(jù)(form-data)的 HTTP 方法键俱。
formmethod 屬性覆蓋 <form> 元素的 method 屬性。
formmethod 屬性適用于 type="submit" 以及 type="image"。

<body>

<form action="/example/html5/demo_form.asp" method="get">
  First name: <input type="text" name="fname" /><br />
  Last name: <input type="text" name="lname" /><br />
<input type="submit" value="提交" />
<input type="submit" formmethod="post" formaction="/example/html5/demo_post.asp" value="使用 POST 提交" />
</form>

</body>

formnovalidate 屬性
novalidate 屬性是布爾屬性。
如果設(shè)置板惑,則規(guī)定在提交表單時不對 <input> 元素進(jìn)行驗證。
formnovalidate 屬性覆蓋 <form> 元素的 novalidate 屬性笼蛛。
formnovalidate 屬性可用于 type="submit"洒放。

<body>

<form action="/example/html5/demo_form.asp" method="get">
E-mail: <input type="email" name="userid" /><br />
<input type="submit" value="提交" /><br />
<input type="submit" formnovalidate="formnovalidate" value="進(jìn)行沒有驗證的提交" />
</form>

</body>

formtarget 屬性規(guī)定的名稱或關(guān)鍵詞指示提交表單后在何處顯示接收到的響應(yīng)蛉鹿。
formtarget 屬性會覆蓋 <form> 元素的 target 屬性滨砍。
formtarget 屬性可與 type="submit" 和 type="image" 使用。

<body>

<form action="/example/html5/demo_form.asp" method="get">
  First name: <input type="text" name="fname" /><br />
  Last name: <input type="text" name="lname" /><br />
<input type="submit" value="提交" />
<input type="submit" formtarget="_blank" value="提交到新窗口/選項卡" />
</form>

</body>

height 和 width 屬性
height 和 width 屬性規(guī)定 <input> 元素的高度和寬度妖异。
height 和 width 屬性僅用于 <input type="image">惋戏。
注釋:請始終規(guī)定圖像的尺寸。如果瀏覽器不清楚圖像尺寸他膳,則頁面會在圖像加載時閃爍响逢。

list 屬性
list 屬性引用的 <datalist> 元素中包含了 <input> 元素的預(yù)定義選項。

<body>

<input list="cars" />
<datalist id="cars">
    <option value="BMW">
    <option value="Ford">
    <option value="Volvo">
</datalist>

</body>

min 和 max 屬性
min 和 max 屬性規(guī)定 <input> 元素的最小值和最大值棕孙。
min 和 max 屬性適用于如需輸入類型:number舔亭、range些膨、date、datetime钦铺、datetime-local订雾、month、time 以及 week矛洞。

multiple 屬性
multiple 屬性是布爾屬性洼哎。
如果設(shè)置,則規(guī)定允許用戶在 <input> 元素中輸入一個以上的值沼本。
multiple 屬性適用于以下輸入類型:email 和 file噩峦。

<body>

<form action="/example/html5/demo_form.asp" method="get">
選擇圖片:<input type="file" name="img" multiple="multiple" />
<input type="submit" />
</form>
<p>請嘗試在瀏覽文件時選取一個以上的文件。</p>

</body>

pattern 屬性
pattern 屬性規(guī)定用于檢查 <input> 元素值的正則表達(dá)式抽兆。
pattern 屬性適用于以下輸入類型:text识补、search、url郊丛、tel李请、email、and password厉熟。

Country code: 
<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

placeholder 屬性
placeholder 屬性規(guī)定用以描述輸入字段預(yù)期值的提示(樣本值或有關(guān)格式的簡短描述)导盅。
該提示會在用戶輸入值之前顯示在輸入字段中。
placeholder 屬性適用于以下輸入類型:text揍瑟、search白翻、url、tel绢片、email 以及 password滤馍。

<body>

<form action="/example/html5/demo_form.asp" method="get">
<input type="search" name="user_search" placeholder="Search W3School" />
<input type="submit" />
</form>

</body>

required 屬性
required 屬性是布爾屬性。
如果設(shè)置底循,則規(guī)定在提交表單之前必須填寫輸入字段巢株。
required 屬性適用于以下輸入類型:text、search熙涤、url阁苞、tel、email祠挫、password那槽、date pickers、number等舔、checkbox骚灸、radio、and file慌植。

用戶名: <input type="text" name="usrname" required>

step 屬性
step 屬性規(guī)定 <input> 元素的合法數(shù)字間隔甚牲。
示例:如果 step="3"义郑,則合法數(shù)字應(yīng)該是 -3、0丈钙、3魔慷、6、等等著恩。
提示:step 屬性可與 max 以及 min 屬性一同使用院尔,來創(chuàng)建合法值的范圍。
step 屬性適用于以下輸入類型:number喉誊、range邀摆、date、datetime伍茄、datetime-local栋盹、month、time 以及 week敷矫。

總結(jié):html基本常用標(biāo)簽h,p,a,img,ul,li,div,span例获。
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市曹仗,隨后出現(xiàn)的幾起案子榨汤,更是在濱河造成了極大的恐慌,老刑警劉巖怎茫,帶你破解...
    沈念sama閱讀 211,639評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件收壕,死亡現(xiàn)場離奇詭異,居然都是意外死亡轨蛤,警方通過查閱死者的電腦和手機(jī)蜜宪,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,277評論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來祥山,“玉大人圃验,你說我怎么就攤上這事》炫唬” “怎么了澳窑?”我有些...
    開封第一講書人閱讀 157,221評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長岳颇。 經(jīng)常有香客問我照捡,道長颅湘,這世上最難降的妖魔是什么话侧? 我笑而不...
    開封第一講書人閱讀 56,474評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮闯参,結(jié)果婚禮上瞻鹏,老公的妹妹穿的比我還像新娘悲立。我一直安慰自己,他們只是感情好新博,可當(dāng)我...
    茶點故事閱讀 65,570評論 6 386
  • 文/花漫 我一把揭開白布薪夕。 她就那樣靜靜地躺著,像睡著了一般赫悄。 火紅的嫁衣襯著肌膚如雪原献。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,816評論 1 290
  • 那天埂淮,我揣著相機(jī)與錄音姑隅,去河邊找鬼。 笑死倔撞,一個胖子當(dāng)著我的面吹牛讲仰,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播痪蝇,決...
    沈念sama閱讀 38,957評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼鄙陡,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了躏啰?” 一聲冷哼從身側(cè)響起趁矾,我...
    開封第一講書人閱讀 37,718評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎给僵,沒想到半個月后愈魏,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,176評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡想际,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,511評論 2 327
  • 正文 我和宋清朗相戀三年培漏,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片胡本。...
    茶點故事閱讀 38,646評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡牌柄,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出侧甫,到底是詐尸還是另有隱情珊佣,我是刑警寧澤,帶...
    沈念sama閱讀 34,322評論 4 330
  • 正文 年R本政府宣布披粟,位于F島的核電站咒锻,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏守屉。R本人自食惡果不足惜惑艇,卻給世界環(huán)境...
    茶點故事閱讀 39,934評論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧滨巴,春花似錦思灌、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,755評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至蜈垮,卻和暖如春耗跛,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背攒发。 一陣腳步聲響...
    開封第一講書人閱讀 31,987評論 1 266
  • 我被黑心中介騙來泰國打工课兄, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人晨继。 一個月前我還...
    沈念sama閱讀 46,358評論 2 360
  • 正文 我出身青樓烟阐,卻偏偏與公主長得像,于是被迫代替她去往敵國和親紊扬。 傳聞我的和親對象是個殘疾皇子蜒茄,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,514評論 2 348

推薦閱讀更多精彩內(nèi)容

  • ??JavaScript 最初的一個應(yīng)用檀葛,就是分擔(dān)服務(wù)器處理表單的責(zé)任,打破處處依賴服務(wù)器的局面腹缩。 ??盡管目前的...
    霜天曉閱讀 659評論 0 3
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理屿聋,服務(wù)發(fā)現(xiàn),斷路器藏鹊,智...
    卡卡羅2017閱讀 134,633評論 18 139
  • 接上 關(guān)于HTML/HTML5(一)http://www.reibang.com/p/33fc7840c079 學(xué)...
    Amyyy_閱讀 784評論 0 4
  • 表單基礎(chǔ)知識 在HTML中润讥,表單是由 元素來表示的,而在JS中盘寡,表單對應(yīng)的則是HTMLFormElement類型楚殿。...
    oWSQo閱讀 904評論 0 1
  • 我今年23歲,在東北完成了大學(xué)竿痰,來到我們的帝都脆粥。 我今年23歲,剛到北京就直接辭掉了包吃包住的工作影涉,提著行李走在大...
    bloodclothes閱讀 431評論 0 7