「融職培訓」Web前端學習 第2章 網頁重構3 表單與表格元素

一、表格元素

在網頁中,我們通常用表格來顯示數據,例如下面的學生列表。

姓名年齡小紅3歲小明2歲

本節我們介紹如何在網頁中製作表格,先來看一下表格元素涉及到的標籤有哪些,示例代碼如下所示:

這裏需要注意的是,表格默認是沒有樣式的,我們添加了border屬性來設置邊框,width屬性設置表格的寬度。在實際開發中,我們用css來設置表格的樣式,而不是用表格的屬性。

關於表格我們先了解這些基本概念,後續的課程中我們會學到一些UI框架可以讓表格元素變得更加美觀。

在網頁中,我們通常用表單向服務器發送數據,例如下面一個最簡單的登錄功能。

關於與服務器交互數據的內容,我們會在第八章詳細講解,本節內容,我們只要簡單瞭解一下常用的表單元素即可。

我們先來看一個完整的表單,然後再來分別介紹表單涉及到的標籤。

input標籤通過type屬性可以分為多個類別,常用的input上面的代碼已經列出:

通過label標籤,可以指定文字相對應的表單空間,例如下面的示例,使用for屬性對應input的id,這樣當鼠標點擊label標籤的文字時,光標就會聚焦到相對的input標籤之上。

placeholder可以設置文本框默認的提示信息,示例效果和代碼如下所示:

用户名:

示例代碼如下:

select標籤定義了網頁中的下拉菜單,下拉菜單的選項用option標籤。

【融職教育】在工作中學習,在學習中工作

版權聲明:本文源自 網絡, 於,由 楠木軒 整理發佈,共 579 字。

轉載請註明: 「融職培訓」Web前端學習 第2章 網頁重構3 表單與表格元素 - 楠木軒