HTML表單_輸入元素
- 大多數情況被用到的表單標簽是輸入標簽
- 輸入型別是由型別屬性(type)定義的,
表單中的單選按鈕可以設定以下幾個屬性:value、name、checked
- value:提交資料到服務器的值(后臺程式PHP使用)
- name:為控制元件命名,以備后臺程式 ASP、PHP 使用
- checked:當設定 checked時,該選項被默認選中
- selected:同上,但是好像是串列專用的
常用的表單元素型別如下:
文本域(Test Fields)
文本域通過 標簽來設定,當用戶要在表單中鍵入字母、數字等內容時,就會用到文本域, 文本域為只有一行的文本框,效果如下:
<form>
account_ : <input type="text" name="firstname"><br>
password: <input type="password" name="lastname">
</form>
- 可以通過將
input type的值改為password來講文本域改為密碼欄位專用(即輸入不可見 **或···)
文本框
<textarea rows="4" cols="30">
我是一個文本框,rows為行數,cols為列數
</textarea>
按鈕
<form action="">
<input type="button" value="https://www.cnblogs.com/jumpywin/p/This is a button">這個按鈕下什么都沒有
</form>
單選按鈕和復選框(Radio Buttons ,ChackBoxes)
<input type="radio">
<input type="checkbox">
<form>
<input type="radio" name="sex" value="https://www.cnblogs.com/jumpywin/p/male">Male
<input type="radio" name="sex" value="https://www.cnblogs.com/jumpywin/p/female">Female<br>
<input type="checkbox" name="vehicle" value="https://www.cnblogs.com/jumpywin/p/Bike">I have a bike
<input type="checkbox" name="vehicle" value="https://www.cnblogs.com/jumpywin/p/Car">I have a car
</form>
- 同一個
name屬性的單選框為一組,同一組的按鈕才能起到單選的作用
select選擇串列
<form action="">
<select name="cars">
<option value="https://www.cnblogs.com/jumpywin/p/null">請選擇性別</option>
<optgroup label="正常">
<option value="https://www.cnblogs.com/jumpywin/p/1">男</option>
<option value="https://www.cnblogs.com/jumpywin/p/2">女</option>
<optgroup label="特殊">
<option value="https://www.cnblogs.com/jumpywin/p/3" selected>不詳</option>
</select>
</form>
<optgroup label="分組名稱">串列選項分組(標簽)(不可做為選項之一,只做分組之用)- 無需多余解釋,代碼即可
- 可在
option標簽中 添加selected元素即為預選項,如沒有,則默認為第一個option
提交按鈕(Submit Button)
<input type="submit">定義了提交按鈕.
顧名思義,提取表單中的資料到某處
- 當用戶單擊確認按鈕時,表單的內容會被傳送到另一個檔案,表單的動作屬性定義了目的檔案的檔案名,由動作屬性定義的這個檔案通常會對接收到的輸入資料進行相關的處理,
重置按鈕
<input type="reset">定義重置按鈕
- 點擊之后會將重置按鈕所在的表單中填寫的內容重新設定為默認值,
<input type="reset" name="button" id="button" value="https://www.cnblogs.com/jumpywin/p/重置">
表單
在表單周圍添加邊框
<form>
<fieldset>
<legend>邊框上的文字:</legend>
account_ : <input type="text" name="firstname"><br>
password: <input type="password" name="lastname">
</fieldset>
</form>
<label>標簽
表單內的 標簽沒有什么特殊的效果 ,只是在用滑鼠點擊標簽時會觸發旁邊的
控制元件(比如單選框)但需要label的for屬性等于input的id屬性
for屬性可把 label 系結到另外一個元素,請把for屬性的值設定為相關元素的id屬性的值,
label肯定不止是這么用的,但是目前···
轉載請註明出處,本文鏈接:https://www.uj5u.com/qiye/96585.html
標籤:Html/Css
上一篇:CSS之border繪制三角形
下一篇:CSS邊框使用-基礎
