HTML語法之表單控件

表單

作用:表單的作用用來收集信息

組成

  • 提示信息
  • 表單控件
  • 表單域

表單介紹

屬性

action:處理用戶數據 

method:get   post 

 get數據提交

通過地址欄的方式進行數據提交,將用戶輸入信息顯示出來,get提交安全性差

post提交

數據通過後臺的方式提交,不會講用戶的信息顯示出來,安全性比較好

 表單控件

  • 文本輸入框

屬性

maxlength:  設置文本輸入框最多能輸多少字符

readonly="readonly" :  設置文本輸入框爲只讀(只能讀不能編輯)

disabled="disabled” :   控件屬於非激活的狀態

name="username"  :     給輸入框設置名稱

value=””         :            設置或者顯示輸入的值

  • 密碼輸入框

屬性與文本輸入框一致  

  • 單選按鈕

注意:實現單選效果一定要給控件設置相同的名稱,即相同的name

屬性

checked="checked"    設置默認選中項

  • 下拉列表

 

屬性:設置默認項 

selected="selected"

 

 實現多選效果 

 multiple="multiple"

 下拉列表分組顯示

 

  • 多選控件 

 設置默認選中項: checked=checked

 

 

     多行文本輸入框

 

 圖片上傳控件

  •   按鈕系列

提交按鈕

普通按鈕

該按鈕不能進行表單提交,通常和js代碼配合使用

重置按鈕

 

將控件中的值恢復到默認轉態 

 

  • 表單分組控件
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
<fieldset>
	<legend align="center">用戶註冊</legend>
   		<form  align="left" action="">

	    <!--文本輸入框-->
	    	用戶名:<input type="text" maxlength="6"><br>

	        密碼:<input type="password" name="pswd"  maxlength="6"><br><br>

	        性別:<input type="radio" name="sex" checked="checked">男
	             <input type="radio" name="sex">女
	        <br><br>

        	省份:
        	<select >

        		<option>山西</option>
        		<option>山東</option>
        		<option>河南</option>
        		<option selected="selected">北京</option>
        	</select>
        	<select >
        		<optgroup label="北京市">
        			<option>海淀區</option>
        			<option>東城區</option>
        			<option>西城區</option>
        			<option>朝陽區</option>
        		</optgroup>
        	</select>
<br><br>


	        愛好:
	        <input type="checkbox" checked=checked name="">抽菸
	        <input type="checkbox" name="">喝酒
	        <input type="checkbox" name="">燙頭

<br><br>   自我介紹:
			<textarea>
				
			</textarea>

<br><br>   
			<input type="file" name="">
<br><br>   
			<input type="submit" ><br>
			<input type="botton" value="普通按鈕"><br>
			<input type="reset" >
			<br><br>
			
	
    	</form>
    
</fieldset>
			

    </body>
</html>

 

 

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章