3-1. HTML表單的用法

Form表單的作用

HTML 表單用于接收不同類型的用戶輸入,用戶提交表單時向服務器傳輸數(shù)據(jù),從而實現(xiàn)用戶與Web服務器的交互。故其作用為數(shù)據(jù)采集。

表單必須要用form標簽包圍

<form action="服務器地址" method="post or get">...</form>

單行輸入文本框

placeholder可在輸入框中顯示提示信息,一旦輸入數(shù)據(jù),提示信息便會自動消失。
<div class="username"> <label for="username">賬號</label> <input id="username" type="text" name="username" value="" placeholder="手機號/電子郵箱"> </div>

密碼輸入

type="password"使得輸入密碼時顯示為小圓點,有效保護信息安全。
<div class="password"> <label for="password">密碼</label> <input id="password" type="password" name="password" placeholder="請輸入密碼"> </div>

單選

注意,相同的name為一組選項。value值不能丟,否則后臺沒有信息。
<div class="sex"> <label>性別</label> <input type="radio" name="sex" value="男">男 <input type="radio" name="sex" value="女">女 </div>

多選

注意,value值不能丟,否則后臺沒有信息。
<div class="hobby"> <label>愛好</label> <input type="checkbox" name="hobby" value="讀書">讀書 <input type="checkbox" name="hobby" value="跑步">跑步 <input type="checkbox" name="hobby" value="聽歌">聽歌 </div>

上傳附件

可用accept限制文件類型。
<div class="file"> <label>上傳頭像</label> <input type="file" name="myfile" accept="image/jpg"> </div>

下拉菜單

<div class="select"> <label>選擇城市</label> <select> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="guagnzhou">廣州</option> </select> </div>

多行文本框

<div class="textarea"> <label>自我介紹</label> <textarea name="article"></textarea> </div>
PS:<rows="行數(shù)" cols="列數(shù)">

hidden隱藏域

傳遞數(shù)據(jù) 但不讓用戶看到
安全策略 防止偽造頁面 ,可以用hidden值做校驗 阻止csrf攻擊
<div class="hidden"> <input type="hidden" name="abcd" value="123456789"> </div>

按鈕

reset為重置表單數(shù)據(jù)
<div class="button"> <button>提交</button> <input type="reset" name="重置" value="重置"> </div>

效果展示

JS Bin

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • HTML表單 在HTML中,表單是 ... 之間元素的集合,它們允許訪問者輸入文本、選擇選項、操作對象等等,然后將...
    蘭山小亭閱讀 3,507評論 2 14
  • 1、關于form表單的基礎 form表單:是一個包含表單元素的區(qū)域;作用,用于包裹表單元素。 表單元素:是允許用戶...
    tangmengyun閱讀 774評論 1 1
  • Spring Cloud為開發(fā)人員提供了快速構建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,586評論 19 139
  • 1.form表單有什么作用?有哪些常用的input 標簽,分別有什么作用? HTML 表單用于接收不同類型的用戶輸...
    大胡子歌歌閱讀 976評論 0 1
  • 1.動手 form 表單table 表格 2. <form>表單元素 1) 簡述: 元素是塊級元素,其開始標簽和結...
    _Dot912閱讀 2,135評論 2 8

友情鏈接更多精彩內容