基礎表單結構:
<body>
<h1>
<hr />
<form action="" name="myFrom" enctype="multipart/form-data >
<input type="text" name="unname" /><br/>
<input type="password" name="pwd" /><br/>
<input type='submit" value="提交" />
</form>
</body>
{form表單的屬性}
action=“URL”:一個URL地址:指定form表單向何處發送數據。
.它里面放一個路徑,我們在代碼編輯器中寫form是總會自帶着它,<form action="">.
.就是我們表單提交到服務器需要一段程序來處理,那有哪個程序處理就可以在action中指定,如果我是注冊,可以由注冊的程序來處理,登錄由登錄的程序來處理
name作用是給表單起名,為了便於我們操作,一個頁面不止一個表單好用來區分
<form name="regFrm">通常我們給表單起名這樣起:reg是這個表單是干什么的(reg注冊)后面以Frm結尾,就是form的縮寫。
enctype=“string”:規定在發送表單之前,如何對表單數據進行編碼。通常在使用文件上傳時,我們會寫enctype=“multipart/form-data”,以二進制傳輸。
method=“get/post”:指定表單以何種方式發送到指定的服務器程序最常用的是個頭和post。
表單元素:
。單行文本框<input type="text" />默認值是type=“text”
。密碼框<input type="password" />
。單選按鈕<input type="radio" />例子:
寫作業了:<input type="radio" checked="checked" name="gender" value="male" /><br />
沒寫作業:<input type="radio" name="gender" value="female">
checked屬性,默認選中當前的單選按鈕,name是命名,value值是提交給后台程序看的。“相同的名字會把radio分為一組,一組radio只能選擇一個。”名字相同即為一組讓這一組radio產生關聯用name。
。復選框<input type="checkbox" />
和單選按鈕差不多
。隱藏域<input type="hidden" />
。文件上傳<input type="file" />
<form action="" method="post" enctype="multipart/form-data" >
<input type="file" name="file1" />
</form>
。下拉框<select>標簽<select><option value="1">北京</option></select>
。多行文本框<textarea></taxtarea>
。標簽<lable></lable>為input元素定義標注。
label本身不會有特殊效果,但它和其他input標簽使用可以提升用戶的使用體驗,用戶不用非得點擊到按鈕,而是點擊文字即可選中。<label>雖然和input進行了關聯,但是提交的依然是value的值,label中的內容不會被提交。label標簽一般和radio、CheckBox類型一起使用。
<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
</form>
。元素集<fieldset></fieldset>
。提交按鈕<input type="submit" />
。普通按鈕<input type="button" />
。重置按鈕<input type="reset" />
練習:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="" name="lainxiForm" enctype="multipart/form-data" method="get">
賬號:<input type="text" name="noname" />
密碼:<input type="password" name="pwd" />
<input type="submit" value="提交"/>
<!--(單選有無name都可以)-->
</form><hr />
<form action="" name="forName" method="get">你喜歡什么:
<label for="juhua">菊花</label><input type="radio" name="lianxi" checked="checked" id="juhua"value=""/>
<label for="kuihua">葵花</label><input type="radio" name="lianxi" id="kuihua" value=""/>
<!--value值要傳送到后台服務器,需要后台人員告訴你-->
<!--復選框需要name聯系在一起-->
<input type="submit" value="提交"/>
</form>
<hr />
<form>
你的愛好是:
睡覺<input type="checkbox" name="hobby"/>
吃<input type="checkbox" name="hobby" />
寫代碼<input type="checkbox" name="hobby" checked="checked"/>
<input type="submit" />
</form>
</body>
</html>
