在日常使用網頁瀏覽信息的過程中免不了要搜索一些信息,或寫篇文章需要發(fā)布嗜逻。
那我們是用什么方式把用戶的信息傳遞給服務器呢洞拨?
我們下館子吃飯點菜的時候服務員都會把你點的菜記錄在一張單子上养铸,然后送到后廚橄登。大廚根據點單就可以做出美味的菜肴了。
同樣败富,在HTML中也是一樣存在類似的單子悔醋,叫表單。它在網頁中的主要功能就是收集用戶信息兽叮,然后遞交給服務器芬骄。
表單主要由三個部分組成分別是,表單標簽鹦聪,表單域账阻,表單按鈕。
舉個例子
上圖中就是一個最基本的表單例子泽本,里面包含表單的三要素淘太,表單標簽、表單域 规丽、表單按鈕蒲牧。
紅框中的代碼就是一段表單代碼由<form></form>標簽包裹著。<form>標簽里所包含的所有代碼都會提交到服務器上面赌莺。
我們來了解一下<form>里面的各個標簽是代表什么冰抢,分別有什么作用
<form action="get info" method="get">
action屬性:的屬性規(guī)定了提交表單時向什么地方提交表單數據,指向服務器地址艘狭。
method屬性:規(guī)定了這份表單數據是以什么方式提交挎扰。
表單的提交方式有兩種分別是get和post.
get的提交方式比較簡單粗暴,所提交的內容會在URL中顯示出來巢音,適用于少量且不具有保密性的數據提交鼓鲁。例如用搜索引擎搜索關鍵字。
host提交數據的方式相對封閉港谊。不會在URL中顯示出表單內容骇吭,并且可是傳輸大量的數據。適用于保密性的數據提交歧寺,或者是大量的數據提交燥狰。例如用戶的賬戶密碼提交。
<input id="username" type="password" name=“username” placeholder="輸入賬號">
<input>標簽:用于收集用戶信息的標簽斜筐。
type屬性: 規(guī)定收集信息的類型龙致。
name屬性: 規(guī)定input元素的名稱,用于對提交到服務器后的表單數據進行標識顷链。
placeholder屬性: 在可以輸入信息的地方預先寫入簡短的信息提示目代。顯示效果如圖中輸入框里的小字提示。
.
<textarea id="comment" name="comment" cols="50" rows="10" placeholder="文本域"></textarea>
textarea標簽:文本域,有滾動條的多行文本輸入控件榛了。
cols在讶、rows屬性:定義textarea文本域的大小。不過一般最好是使用CSS的height和nidth來定義霜大。
<input type="submit" value="提交">
value屬性:為input元素設定值构哺,對于不同的輸入類型,value屬性的用法也不同战坤。上行代碼中value屬性定義的是按鈕上的顯示文本曙强。
以上就是一段最簡單最基礎的表單代碼,它包含了表單最基礎的三要素途茫。實現了最基礎的表單樣式碟嘴,了解了最基礎的表單標簽屬性,表單還有很多標簽屬性值沒有細挖囊卜。待日后隨著更深入的了解再寫一篇深入的關于表單的方方面面臀防。
2017/5/4 17:36