form表單的元素及方法
阿新 • • 發佈:2020-12-28
FORM表單
關於form表單,對前端後、端的程式設計師都是必會的知識點,那麼今天來聊一聊關於form表單的基本元素及其使用方法把!
FORM標籤
form標籤,也就是form表單。表單裡的每一個元素都要被form包起來,比如:
<form>
<input>
<select></select>
<form>
input元素
input標籤是用來收集使用者資料的元素,通常後面會帶有屬性(type),如:
<input type="text">
常用的type屬性有:
type屬性 | 作用 |
---|---|
file | 是檔案上傳域 |
reset | 是重置按鈕 value屬性 可以修改文字值 |
submit | 是提交按鈕 value屬性 可以修改文字值 |
text | 是文字輸入框 value設定預設顯示內容 |
password | 是密文輸入框 value設定預設顯示內容 |
checkbox | 是複選框, checked="checked"預設選項 |
button | 是按鈕 ,value屬性 可以修改文字值 |
radio | 是單選框 name屬性可以對其進行分組 同一組只可以選單個, checked="checked"預設選項 |
hidden | 是隱藏域 當我們要傳送某些資訊,而這些資訊,不需要使用者參與的時候,可以使用隱藏域(提交的時候同時傳送給伺服器) |
select元素
標籤是下拉列表框,裡面包著任意行的標籤,標籤是下拉列表框的選項,可以用selected設定 預設選中,程式碼如下 :
<select>
<option>選項1</option>
<option>選項2</option>
<!--預設顯示選項3 -->
<option selected>選項3</option>
</select>
textarea元素
< textarea>標籤是表示多行輸入文字框,可以通過rows屬性與cols屬性來設定。
rows 屬性設定可以顯示幾行的高度。
cols屬性 設定可以顯示每行能有多少字元的寬度。
假設設定高10行,一行能顯示20個字元
<textarea rows="10" cols="20">
中間可以輸入預設值,不輸則無
</textarea>
.
.
.
.
下面給大家統統演示一遍
老樣子,登錄檔單。
<form>
使用者名稱稱:<input type="text"/><br>
使用者密碼:<input type="password"/><br>
性別:
<input type="radio" name="sex" checked/>男
<input type="radio" name="sex"/>女
<br>
興趣愛好:
<input type="checkbox" checked/>Java
<input type="checkbox"/>JavaScript
<input type="checkbox"/>C++
<br>
國籍:
<select name="country">
<option>--請選擇國籍--</option>
<option selected="selected">中國</option>
<option >美國</option>
<option>德國</option>
</select>
<br>
自我介紹:
<textarea rows="10" cols="20">
中間可以輸入預設值,不輸則無
</textarea>
<br>
<input type="reset" />
<input type="submit" />
</form>
大家可以CV試一下
完