国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

【譯】HTML表單指南---第一個(gè)HTML表單

yearsj / 2649人閱讀

摘要：一個(gè)表單由一或多個(gè)部件組成，這些部件可以是文本框單行或多行選擇框按鈕復(fù)選框或單選按鈕。在我們的示例里，一個(gè)文本框中用了該屬性的默認(rèn)值，該值表示一個(gè)基本的單行文本框，用于接收無(wú)控制或驗(yàn)證的任何文本。

前言

這個(gè)系列譯自mdn上的一份表單指南，原文詳盡闡述了表單相關(guān)的基礎(chǔ)知識(shí)。而表單作為一個(gè)經(jīng)典的頁(yè)面交互方式，是每個(gè)前端工程師繞不開的話題，通過(guò)翻譯這個(gè)系列的文章既是有助于掃清自己的知識(shí)盲區(qū)，也希望借此能讓更多人受惠吧~

先列下目錄：

第一個(gè)HTML表單

怎樣構(gòu)建HTML表單

原生表單組件

HTML表單的CSS

HTML表單樣式

HTML表單高級(jí)樣式

表單組件的屬性兼容表

發(fā)送表單數(shù)據(jù)

表單數(shù)據(jù)校驗(yàn)

怎樣創(chuàng)建定制表單組件

通過(guò)JavaScript發(fā)送表單

使用FormData對(duì)象

遺留瀏覽器中的表單

聲明：本文源于mdn，遵循mdn的相關(guān)協(xié)議，翻譯過(guò)程可能會(huì)加入我個(gè)人的理解，轉(zhuǎn)載請(qǐng)注明出處。

好，該說(shuō)的都說(shuō)完了，正文開始~

第一個(gè)HTML表單 
原文

這是一篇介紹HTML表單的文章，通過(guò)一個(gè)簡(jiǎn)單的contact表單，我們可以看到構(gòu)建HTML表單的所有基本知識(shí)。本文假設(shè)你已掌握基本的HTML和CSS，但還不了解HTML表單。

開始之前 啥是HTML表單？

HTML表單是用戶和網(wǎng)站或引用的一個(gè)主要交互點(diǎn)。表單允許用戶發(fā)送數(shù)據(jù)給網(wǎng)站，大多數(shù)時(shí)候數(shù)據(jù)會(huì)發(fā)到服務(wù)器上，然而頁(yè)面也可以把數(shù)據(jù)攔下來(lái)給自己用。

一個(gè)HTML表單由一或多個(gè)部件組成，這些部件可以是文本框（單行或多行）、選擇框、按鈕、復(fù)選框、或單選按鈕。通常，部件們會(huì)伴隨一個(gè)描述它們使用目的的label出現(xiàn)。

處理表單需要什么？

處理HTML時(shí)，你只需一個(gè)文本編輯器和一個(gè)瀏覽器即可。當(dāng)然，你也也可以使用諸如Visual Studio、 Eclipse，Aptana之類的IDE。

此外，HTML表單和常規(guī)的HTML的主要區(qū)別在于表單收集的數(shù)據(jù)往往會(huì)被發(fā)送到服務(wù)器，這時(shí)你就需要搭個(gè)服務(wù)器來(lái)接受和處理這些數(shù)據(jù)了。至于如何搭建服務(wù)器，本文不作討論，欲知詳情，你可以看一篇這方面的文章：發(fā)送表單數(shù)據(jù)。

設(shè)計(jì)你的表單

在開始擼代碼前，最好先花點(diǎn)時(shí)間來(lái)構(gòu)思下我們的表單。一個(gè)快速設(shè)計(jì)模型有助于你定義希望從用戶那獲得的數(shù)據(jù)集。從用戶體驗(yàn)（UX）的觀點(diǎn)來(lái)看，要知道你的表單越大，你越有可能失去用戶。所以你應(yīng)該保持簡(jiǎn)單和專注，只問(wèn)你真想要的內(nèi)容。要具體討論表單的用戶體驗(yàn)已超出本文的范圍，給幾篇這方面的文章把：

Smashing Magazine有不少和表單UX有關(guān)的好文章，但其中最重要的莫屬Extensive Guide To Web Form Usability啦。

UXMatters上的資源也蠻豐富的，從基本的最佳實(shí)踐到類似多頁(yè)表單復(fù)雜內(nèi)容都有。

在本文，我們將建立一個(gè)簡(jiǎn)單的contact表單，草圖如下：

在我們的表單里，有三個(gè)文本框和一個(gè)按鈕。文本框用來(lái)詢問(wèn)用戶的名字、郵箱和他們想發(fā)送的消息，點(diǎn)擊按鈕則會(huì)把數(shù)據(jù)發(fā)給服務(wù)器。

盡情地寫一波HTML吧

現(xiàn)在我們要開始編碼了，建立起我們的contact表單，一共需要這幾個(gè)的HTML元素：

, , ,

元素在這里用于結(jié)構(gòu)化我們的代碼并方便我們定義樣式。此外還要注意元素for屬性的使用，該屬性是一種顯式聯(lián)系label和表單組件的方法，可以給它賦予想要關(guān)聯(lián)組件的id值。這樣一來(lái)，用戶就可以通過(guò)點(diǎn)擊label來(lái)激活表單組件了。如果你還想了解for
屬性的其他好處，就參考這篇文章吧：怎樣構(gòu)建HTML表單

至于元素，type屬性是其最重要的屬性，因?yàn)樵搶傩远x了input元素的行為。欲知更多，請(qǐng)閱讀原生表單組件。

在我們的示例里，一個(gè)文本框中用了該屬性的默認(rèn)值text，該值表示一個(gè)基本的單行文本框，用于接收無(wú)控制或驗(yàn)證的任何文本。而另外一個(gè)文本框則使用了值email，表示定義一個(gè)只接收合法郵箱地址單行文本框，也就是說(shuō)它會(huì)對(duì)用戶輸入的數(shù)據(jù)進(jìn)行一些檢查。我們會(huì)在表單數(shù)據(jù)校驗(yàn)這篇文章里討論更多和表單驗(yàn)證有關(guān)的內(nèi)容，

最后，我們來(lái)比較下和間的語(yǔ)法差別。就是所謂的自動(dòng)閉合元素，這種元素需要你加個(gè)"/"而不是結(jié)束標(biāo)簽來(lái)閉合（譯注：這只是xhtml的強(qiáng)制要求，但在html里不用"/"也是可以的）；而 再加個(gè)button來(lái)完成表單

我們的表單代碼已經(jīng)快準(zhǔn)備好了，只差個(gè)讓用戶發(fā)送數(shù)據(jù)的按鈕而已，再加個(gè)

按鈕共有三種類型：submit, reset, button。

點(diǎn)擊submit型按鈕，會(huì)按照我們?cè)?b>

元素上定義的action屬性，把表單數(shù)據(jù)發(fā)給指定的頁(yè)面。

點(diǎn)擊reset型按鈕，會(huì)直接重置所有表單組件為它們的默認(rèn)值。從用戶體驗(yàn)的角度來(lái)看，這其實(shí)是個(gè)不太好的操作。

點(diǎn)擊button型按鈕，什么都不會(huì)發(fā)生。。。聽起來(lái)有點(diǎn)蠢，但其實(shí)這對(duì)于用javascript來(lái)定義自定義按鈕是再好不過(guò)啦。

當(dāng)然，你也可以用元素來(lái)生成上面那幾個(gè)按鈕，和使用

在本例中，表單會(huì)發(fā)送三組數(shù)據(jù)，依次命名為user_name、user_email和user_message，他們會(huì)以HTTP POST的方式發(fā)送到URL"/my-handling-form-page"。

而在服務(wù)端，負(fù)責(zé)處理URL"/my-handling-form-page"的腳本會(huì)從HTTP請(qǐng)求中以3組鍵/值對(duì)的形式接收這些數(shù)據(jù)。至于腳本如何處理這些數(shù)據(jù)就取決于你的需求了，各種服務(wù)端語(yǔ)言（PHP, Python, Ruby, Java, C#等）有它們自有的機(jī)制來(lái)做這件事。要深入探究這方面就不是本文的主題了，欲知詳情，我們會(huì)在發(fā)送表單數(shù)據(jù)這篇文章中給你一些例子。

結(jié)論

恭喜！你終于完成你的第一個(gè)HTML表單啦~下面就是最終效果的在線演示：

演示

接下來(lái)是時(shí)候更上一層樓了，其實(shí)HTML表單遠(yuǎn)比我們?cè)谶@里展現(xiàn)的強(qiáng)大，本指南的其他文章將會(huì)幫助你掌握剩下的內(nèi)容。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/54367.html

相關(guān)文章

  • 【譯】遺留瀏覽器中的表單

    摘要：提到老舊瀏覽器，我們腦海中往往復(fù)現(xiàn)的就是舊版的。但幸運(yùn)的是，有一些技巧可以協(xié)助解決由老舊瀏覽器引起的的問(wèn)題。放棄表單和老舊瀏覽器的最大問(wèn)題是對(duì)的支持。結(jié)論如你所見，處理老舊瀏覽器所涉及的內(nèi)容不止有表單。 系列文章說(shuō)明 原文 所有的web開發(fā)者都會(huì)很快（或者很痛苦地）意識(shí)到Web是一個(gè)粗糙的環(huán)境，其中最糟糕的一點(diǎn)就是老舊的瀏覽器。提到老舊瀏覽器，我們腦海中往往復(fù)現(xiàn)的就是舊版的IE。但...

    張憲坤 評(píng)論0 收藏0

  • 【譯】遺留瀏覽器中的表單

    摘要：提到老舊瀏覽器，我們腦海中往往復(fù)現(xiàn)的就是舊版的。但幸運(yùn)的是，有一些技巧可以協(xié)助解決由老舊瀏覽器引起的的問(wèn)題。放棄表單和老舊瀏覽器的最大問(wèn)題是對(duì)的支持。結(jié)論如你所見，處理老舊瀏覽器所涉及的內(nèi)容不止有表單。 系列文章說(shuō)明 原文 所有的web開發(fā)者都會(huì)很快（或者很痛苦地）意識(shí)到Web是一個(gè)粗糙的環(huán)境，其中最糟糕的一點(diǎn)就是老舊的瀏覽器。提到老舊瀏覽器，我們腦海中往往復(fù)現(xiàn)的就是舊版的IE。但...

    Airmusic 評(píng)論0 收藏0

  • 【譯】HTML表單樣式

    摘要：并非所有組件受的影響都是平等的如今在表單使用時(shí)依然有一些困難這些問(wèn)題可歸為三類還好的若存在跨平臺(tái)問(wèn)題，一些元素可以只添加少許的樣式，有如下幾個(gè)結(jié)構(gòu)元素此外，還有所有的文本框組件單行或多行，以及按鈕。 系列文章說(shuō)明 原文 本文中，我們將學(xué)習(xí)如何使用CSS來(lái)讓HTML表單看起來(lái)更漂亮，這可能需要竅門才能做到。由于歷史及技術(shù)上的原因，表單組件并不太適合使用CSS；而也正因?yàn)橛羞@些困難，許...

    DC_er 評(píng)論0 收藏0

  • 【譯】HTML表單樣式

    摘要：并非所有組件受的影響都是平等的如今在表單使用時(shí)依然有一些困難這些問(wèn)題可歸為三類還好的若存在跨平臺(tái)問(wèn)題，一些元素可以只添加少許的樣式，有如下幾個(gè)結(jié)構(gòu)元素此外，還有所有的文本框組件單行或多行，以及按鈕。 系列文章說(shuō)明 原文 本文中，我們將學(xué)習(xí)如何使用CSS來(lái)讓HTML表單看起來(lái)更漂亮，這可能需要竅門才能做到。由于歷史及技術(shù)上的原因，表單組件并不太適合使用CSS；而也正因?yàn)橛羞@些困難，許...

    taowen 評(píng)論0 收藏0

  • [譯]聊一聊CSS方法論

    摘要：這個(gè)方法論在內(nèi)容和容器之間有著明顯的區(qū)分。這是通過(guò)把命名為表示其角色的類名。通過(guò)使用這種扁平的命名方式避免了多后代的選擇器。 原文鏈接：A Look at Some CSS methodologies CSS在大型，復(fù)雜，快速迭代的系統(tǒng)中難以管理的程度是出了名的。 其中一個(gè)原因是CSS缺少內(nèi)置的作用域管理機(jī)制。在CSS中，所有的一切都是全局的，這意味著任何你所做的改變都有可能層疊或者改...

    CoffeX 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<