表單表格

表單

form屬性

2.表單

form

action  定義提交的網(wǎng)址  也算是路徑
method 定義提交的請求方式
 get
  優(yōu)點:速度快  給服務(wù)器造成的壓力小
  缺點:保密性差  對傳輸文件大小有限制
 post
  優(yōu)點:保密性好   可以上傳大文件
  缺點:速度慢  給服務(wù)器造成的壓力大

input 元素

  • 屬性
    1.name 定義input元素的名稱 作為提交給服務(wù)器的參數(shù)名
    2.value 定義input元素的值 作為提交給服務(wù)器的參數(shù)名對應(yīng)的值
  • 類型 type
    1.text 文本框(placeholder 定義文本框內(nèi) 默認(rèn)展示的值)
 輸入框:<input type="text" placeholder="請輸入">

2.password 密碼框
在里面輸入的值會以星號或者小點展示

 密碼框:<input type="password"><br>

3.button 按鈕

<button>按鈕</button>

4.checkbox 復(fù)選框 checked默認(rèn)狀態(tài) checked="checked"

   <form action="">復(fù)選框:
        <input type="checkbox" name="sex" value="man">數(shù)學(xué)
        <input type="checkbox" name="sex" value="woman">語文
    </form>

5.radio 單選框 name值必須一樣

 <form action="">單選框:
        <input type="radio" name="sex" value="man">男
        <input type="radio" name="sex" value="woman">女
    </form>

6.textarea 生成一個可以多行輸入的文本框
cols 定義文本的寬度
rows 定義文本的行數(shù)

 <textarea name="" id="" cols="30" rows="10">這是一個文本框</textarea>

7.submit 提交 向服務(wù)器發(fā)送表單數(shù)據(jù)

    <form action="">提交按鈕:
        <input type="submit" value="提交">
    </form>

8.select/option 創(chuàng)建單選或多選菜單 必須組合使用

  <select>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="opel">Opel</option>
        <option value="audi">Audi</option>
   </select>

9.file 上傳文件
10.reset 重置 清空表單中所有已輸入的內(nèi)容

  • 表單樣式初始化
    form margin:0px;
    input outline:0px/none;清除選中狀態(tài)下的藍色邊框
    margin:0px;
    padding:0px;
    select margin:0px
    textarea margin:0px;
    padding:0px;
    outline:0px/none;清除選中狀態(tài)下的藍色邊框
    resize:none; 設(shè)定 用戶無法自己調(diào)節(jié)大小
    overflow:auto; 超出隱藏

表單新增類型:
email 用來填寫郵箱地址
url 用來填寫網(wǎng)址
range設(shè)置滑動條
date 日期控件
month 年月控件
week 周控件
time 時間控件
datetime 日期控件
新增樣式:
rgba( ) r,g,b(0~255) a(0~1)
text-shadow 文字陰影
四個參數(shù)
水平位置
垂直位置
陰影模糊度
顏色
可以同時給一個文字設(shè)置多個陰影 陰影會重疊
writing-mode:vertical-lr;設(shè)置文字垂直排布居中

表格

table 所有的表格元素都在table中編寫
屬性(直接寫在標(biāo)簽內(nèi)部)
border 聲明 表格邊框
標(biāo)題沒有邊框
表格行沒有邊框
只有表格單元格有邊框
border 里面的數(shù)值控制的是最外層的大邊框 是table的獨有屬性
cellspacing 控制單元格之間的間隙 是table的獨有屬性
cellpadding 控制單元格內(nèi)部的內(nèi)邊距 是table的獨有屬性
樣式(寫在style標(biāo)簽里面)
border-collapse:collapse;樣式初始化
table td,th{padding: 0px;}樣式初始化
caption 編寫 表格標(biāo)題
文字居中
thead 定義表頭行
th定義 表頭行里面的標(biāo)準(zhǔn)單元格
文字居中
文字加粗
tbody 定義表格內(nèi)容區(qū)域
tr 定義表格行
td 定義表格標(biāo)準(zhǔn)單元格
行合并(橫著 上下) rowspan 將下面行的 同列單元格 合并到 本單元格中
被合并的單元格 不在下面行出現(xiàn) (被合并的不要那個td了)
列合并 (豎著 左右)colspan 將同行 本單元格 后面列的 若干單元格合并
被合并的單元格不在后面列出現(xiàn)(被合并的不要那個td了)
tfooter 定義表格尾部 行
單元格沒有特殊的標(biāo)簽 就使用td
總結(jié)
thead跟tr 都是定義行 但是thead專門定義表頭 tr一般用來定義內(nèi)容區(qū)域的行
同理 th 跟td一個作為表頭單元格 一個是內(nèi)容單元格

能達到 顯示與隱藏的視覺效果 的幾種方法
display none為隱藏 block 為顯示
opacity 0為完全透明 1為不透明
設(shè)置寬高 overflow:hidden 0px為消失 固定值為出現(xiàn)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末旭斥,一起剝皮案震驚了整個濱河市叹侄,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌渴丸,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,376評論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件斩郎,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機俏脊,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,126評論 2 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來肤晓,“玉大人爷贫,你說我怎么就攤上這事〔购叮” “怎么了漫萄?”我有些...
    開封第一講書人閱讀 156,966評論 0 347
  • 文/不壞的土叔 我叫張陵,是天一觀的道長盈匾。 經(jīng)常有香客問我腾务,道長,這世上最難降的妖魔是什么削饵? 我笑而不...
    開封第一講書人閱讀 56,432評論 1 283
  • 正文 為了忘掉前任岩瘦,我火速辦了婚禮,結(jié)果婚禮上窿撬,老公的妹妹穿的比我還像新娘启昧。我一直安慰自己,他們只是感情好尤仍,可當(dāng)我...
    茶點故事閱讀 65,519評論 6 385
  • 文/花漫 我一把揭開白布箫津。 她就那樣靜靜地躺著,像睡著了一般宰啦。 火紅的嫁衣襯著肌膚如雪苏遥。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,792評論 1 290
  • 那天赡模,我揣著相機與錄音田炭,去河邊找鬼。 笑死漓柑,一個胖子當(dāng)著我的面吹牛教硫,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播辆布,決...
    沈念sama閱讀 38,933評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼瞬矩,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了锋玲?” 一聲冷哼從身側(cè)響起景用,我...
    開封第一講書人閱讀 37,701評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎惭蹂,沒想到半個月后伞插,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體割粮,經(jīng)...
    沈念sama閱讀 44,143評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,488評論 2 327
  • 正文 我和宋清朗相戀三年媚污,在試婚紗的時候發(fā)現(xiàn)自己被綠了舀瓢。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,626評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡耗美,死狀恐怖京髓,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情幽歼,我是刑警寧澤朵锣,帶...
    沈念sama閱讀 34,292評論 4 329
  • 正文 年R本政府宣布,位于F島的核電站甸私,受9級特大地震影響诚些,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜皇型,卻給世界環(huán)境...
    茶點故事閱讀 39,896評論 3 313
  • 文/蒙蒙 一诬烹、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧弃鸦,春花似錦绞吁、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,742評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至购岗,卻和暖如春汰聋,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背喊积。 一陣腳步聲響...
    開封第一講書人閱讀 31,977評論 1 265
  • 我被黑心中介騙來泰國打工烹困, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人乾吻。 一個月前我還...
    沈念sama閱讀 46,324評論 2 360
  • 正文 我出身青樓髓梅,卻偏偏與公主長得像,于是被迫代替她去往敵國和親绎签。 傳聞我的和親對象是個殘疾皇子枯饿,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,494評論 2 348

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