1. 程式人生 > >初學者→HTML-表單的學習

初學者→HTML-表單的學習

表單域:相當一個容器,用來容納所有的表單控制元件和提示資訊
                     在HTML中<form>常用標記用於定義表單域,只有在<form>才能實現使用者的資訊收集和專遞,從而<form>內的全部內容交給了伺服器
            1.表單作用:提交資料
                    表格:存放資料
                    常用屬性:
                    name    表單名稱
                    action  提交的地址
                    method  提交的方法
                    get     預設值
                    post    
                    get和post的區別
                    (1)get提交資料不安全,資訊會在地址中顯示,post相對安全
                    (2)get提交的的資料有限制,最大為2k,post理論上沒有限制,合適大量資料      
            2。input控制元件
                        a。輸入框:
                            type型別:<input typr=屬性值"">
                                (1)text:收集少量的文字資料,使用者可見的
                                (2)password:收集使用者密碼資料
                                (3)redio:單選框
                                (4)button:普通按鈕
                                (5)submit;提交按鈕
                                (6)checkbox:複選框
                                (7)type裡面常用的屬性:
                                name   輸入框的名稱
                                value  當前值
                                placeholder:是html5新增的屬性,主要讓表單更加智慧,
                                placeholder:好處是當我們聚焦輸入文字的時候我們在placeholder="預設值"的文字就會自動清空

相應的程式碼展現如下:

<html>
	<head>
		<title>表單學習</title>
		<meta charset="utf-8"/>
	</head>
	<body>
		<form action="" name="myfor" method="post">
			使用者:
			<input type="text" name="username" value="" placeholder="使用者名稱不能為空"/>
			<br /><br />
			密碼:
			<input type="password" name="password" id="password" value="" placeholder="請輸入正確的密碼"/>
			<br /><br />
			<hr />
			<!--單選框-->
			性別:
			<input type="radio" name="sex"/>男
			<input type="radio" name="sex"/>女
			<br /><br />
			<hr />
			<!--多選框-->
			愛好:
			<input type="checkbox"/>跑步
			<input type="checkbox"/>旅行
			<input type="checkbox"/>健身
			<input type="checkbox"/>睡覺
			<input type="checkbox"/>看書
			<input type="checkbox"/>逛街
			<br /><br />
			<hr />
			<!--表單最後基於submit才能提交-->
			<input type="submit" name="" id="" value="登陸" />
			<input type="reset" name="" id="" value="取消" /><br />
		</form>
	</body>
</html>

執行結果;

標題