建立一個HTML的form表格表單
建立一個HTML的form表格形式的表單,我們要實現如圖的樣式:
話不多說,直接上程式碼:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>使用者資訊</title> </head> <body> <!-- form表單部分:用來傳輸資料 是一個整個元件 form屬性 action:將表單內容提交的地址 我將提交地址設為了百度_(:зゝ∠)_ method:提交的方式有兩種get和post 這裡我使用的get方式 --> <form action="https://www.baidu.com" method="get"> <!-- border用來規定表格邊框的寬度 align表格在網頁中的對齊方式 cellpadding規定單元邊緣和其中內容的空白大小 cellspacing規定單元格之間的空白大小 --> <table border="1" align="center" cellpadding="1" cellspacing="2" > <tr> <td width="125" height="35">使用者名稱:</td> <td width="300" ><input type="text" name="username"/></td> </tr> <tr> <td width="125" height="35">密碼:</td> <td width="300"><input type="password" name="pwd"/></td> </tr> <tr> <td width="125" height="35">性別:</td> <td width="300"> <input type="radio" name="sex" value=1 />男 <input type="radio" name="sex" value=0 />女 </td> </tr> <tr> <td width="125" height="35">愛好:</td> <td width="300"> <input type="checkbox" name="hobby" value="basketball" />籃球 <input type="checkbox" name="hobby" value="football" />足球 <input type="checkbox" name="hobby" value="badminton" />羽毛球 </td> </tr> <tr> <td width="125" height="35">來自:</td> <td width="300"> <select> <option value="上海">上海</option> <option value="北京">北京</option> <option value="廣州">廣州</option> <option value="成都">成都</option> <option value="鄭州">鄭州</option> </select> </td> </tr> <tr> <td width="125" height="35">照片:</td> <td width="300"> <input type="file" name="photo" </td> </tr> <tr> <td width="125" height="35">介紹:</td> <td width="300"> <textarea cols="50" rows="5"></textarea> </td> </tr> <tr> <td width="125" height="35" colspan="2"> <input type="submit" value="提交資料"/> <input type="reset" /> </td> </tr> </table> </form> </body> </html>
目的是設計一個表格格式的表單,那就主要是熟悉對<table>標籤的使用。
<table> 標籤定義 HTML 表格。
簡單的 HTML 表格由 table 元素以及一個或多個 tr、th 或 td 元素組成。
<tr> 標籤定義 HTML 表格中的行。
tr 元素包含一個或多個 th 或 td 元素。
<td> 標籤定義 HTML 表格中的標準單元格。
HTML 表格有兩類單元格:
表頭單元 - 包含頭部資訊(由 th 元素建立)
標準單元 - 包含資料(由 td 元素建立)
td 元素中的文字一般顯示為正常字型且左對齊。
更復雜的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。
相關推薦
2.9 使用Eureka快速優雅地建立一個漂亮的表單 [iOS開發中的神兵利器]
1. 本節課將為您演示,如何使用第三方庫,快速建立強大的表單。首先確保在您的專案中,已經安裝了所需的第三方庫。雙擊此處檢視安裝配置檔案。 2. 根據配置檔案中的相關設定,安裝第三方庫。安裝完成之後,雙擊開啟此處的專案檔案。 3. 然後在左側的專案導航區,開啟檢視控制器的程式碼
js 建立一個post虛擬表單
<script type="text/javascript"> $("#s1 , #s2 ").change(function () { if ($("#s
[Swift通天遁地]二、表格表單-(9)快速建立一個美觀強大的表單
本文將演示如何利用第三方庫,快速建立一個美觀強大的表單 首先確保在專案中已經安裝了所需的第三方庫。 點選【Podfile】,檢視安裝配置檔案。 1 platform :ios, '12.0' 2 use_frameworks! 3 4 target 'DemoApp' do 5
建立一個HTML的form表格表單
建立一個HTML的form表格形式的表單,我們要實現如圖的樣式:話不多說,直接上程式碼:<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&
[Swift通天遁地]二、表格表單-(1)建立自定義的UITableViewCell(單元格類)
本文將演示如何在表單檢視中,新增一個自定義的單元格類。 首先建立一個自定義的單元格類。 在專案資料夾【DemoApp】上點選滑鼠右鍵,彈出右鍵選單。 【New File】->【Cocoa Touch Class】->【Next】-> 【Class】:CustomizeUITableV
[Swift通天遁地]二、表格表單-(2)建立右側帶有索引的UITableView(表單檢視)
本文將演示如何給表格新增索引功能。 在專案導航區,開啟檢視控制器的程式碼檔案【ViewController.swift】 現在開始編寫程式碼,建立一個表格,並在表格右側新增一列快捷索引。 1 import UIKit 2 3 //使當前的檢視控制器類,遵循表格的資料來源協議UIT
[Swift通天遁地]二、表格表單-(3)在表格中巢狀另一個表格並使Cell的高度自適應
本文將演示如何在表格中巢狀另一個表格並使Cell的高度自適應,建立更加強大的佈局效果。 在專案資料夾【DemoApp】上點選滑鼠右鍵,彈出右鍵選單。 【New File】->【Cocoa Touch Class】->【Next】-> 【Class】:CustomizeUITableVi
[Swift通天遁地]二、表格表單-(3)在表格中嵌套另一個表格並使Cell的高度自適應
works uiview 添加 comm exe bounds tro enc 表格 本文將演示如何在表格中嵌套另一個表格並使Cell的高度自適應,創建更加強大的布局效果。 在項目文件夾【DemoApp】上點擊鼠標右鍵,彈出右鍵菜單。 【New File】->【C
html表格表單標簽的結合
-h 單元 adding set 不能 表單標簽 ges 青島 sub 今天我嘗試將表格表單基本標簽結合起來放在網頁中,發現再沒用表單元素中<form></form>時各類標簽功能都可顯示,只是不能提交網頁,所有與提交網頁的標簽都不能使用提交功能,而
【html學習整理】meta,img,表格,表單
utf-8 rds 間距 自己的 title 實體 tip HR 例題 meta標簽: 作用: 給搜索引擎用 。 告訴瀏覽器是什麽編碼 <meta charset="UTF-8"> <meta name="keywords", co
element UI表單驗證:一個複雜迴圈表單渲染後資料修改後的部分表單項驗證
一、前言 普通的表單驗證參考element UI官方文件即可找到解決方案並順利進行程式碼實現,官方也給出了幾個示例,是很好的參考。不過,對於複雜的表單驗證,官方文件並沒有給出過多示例或者說明。文章中的例項就是在實際專案中遇到的一個複雜表單的驗證問題。 文章中前端程式碼基
前端網頁學習 Day50(表格 表單 音視訊 形變 瀏覽器適配)
div { width: 150px; height: 150px; background-color: red; margin: 10px auto; transition: 3s; } /*旋轉形變:旋轉的是角度 deg*/ .d1:hover { /
小白學前端------------------HTM列表,表格,表單,音視訊標籤及屬性
頁面中的組成部分 一.列表,表格,表單,音視訊 1.列表標籤 有序列表 <ol><ul></ul></ol> 屬性 start 規定有序列表的起始值。 type 規定在列表中使用的標記型別。(1 a A
pandas追加寫入excel---建立多個sheet表單
在寫入表格時候給自己挖了個坑,圖省事直接用to_excel(fileuri,sheetname)寫入,怎麼寫怎麼覆蓋 。後來隱約感覺到是自動關閉writer的鍋,改成writer讀寫後就好了。 writer = pd.ExcelWriter(filepath) compa
php基礎教程——2建立模板、處理表單
一.建立模板: 將頁面中經常出現的部分複製到一個html或php檔案中,在原頁面中用require()/include()函式引入。 例子: 源html:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional
[Swift通天遁地]二、表格表單-(1)創建自定義的UITableViewCell(單元格類)
pre bound tex 右鍵菜單 cells nib 控件綁定 根視圖 thumbnail 本文將演示如何在表單視圖中,添加一個自定義的單元格類。 首先創建一個自定義的單元格類。 在項目文件夾【DemoApp】上點擊鼠標右鍵,彈出右鍵菜單。 【New File】-
[Swift通天遁地]二、表格表單-(4)使用系統自帶的下拉重新整理控制元件,製作表格的下拉重新整理效果
本文將演示如何使用系統自帶的下拉重新整理控制元件,製作表格的下拉重新整理效果。 在專案導航區,開啟檢視控制器的程式碼檔案【ViewController.swift】 現在開始編寫程式碼,實現表格的下拉重新整理功能。 1 import UIKit 2 3 //使當前的檢視控制器類,遵循表
[Swift通天遁地]二、表格表單-(7)電子郵件Mail:實現單元格左右滑動調出功能按鈕
本文將演示對單元格進行擴充套件,當手指在單元格左右滑動時,彈出不同的功能選單。 Github專案:【MGSwipeTableCell】 下載該專案的原始碼。資料夾【demo】->資料夾【MailAppDemoSwift】->資料夾【MailAppDemoSwift】 ->雙擊檔案【Ma
js動態建立隱藏的form表單
function makeForm() { // 建立一個 form const tempForm = document.createElement("form"); tempForm.id = "tempForm"; tempForm.name = "tempForm"
[Swift通天遁地]二、表格表單-(8)快速實現表單的輸入驗證
本文將演示如何快速實現表單是輸入驗證。 首先確保在專案中已經安裝了所需的第三方庫。 點選【Podfile】,檢視安裝配置檔案。 1 platform :ios, '12.0' 2 use_frameworks! 3 4 target 'DemoApp' do 5 source '