09.PNG
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Html表單</title>
</head>
<body>
<form id="userform" action="your url" method="post"
title="用戶注冊表單" target="_self" enctype="multipart/form-data">
<fieldset>
<legend>用戶注冊信息</legend>
<br>
昵稱:<input type="text" name="un" maxlength="15" value="Tom">
<br>
<br>
密碼:<input type="password" name="pw" maxlength="10">
<br>
<br>
性別:<input type="radio" name="gender" value="m" checked="checked">男
<input type="radio" name="gender" value="w">女
<br>
<br>
頭像:<input id="userphoto" type="file" name="profile">
<br>
<br>
籍貫:<select name="province">
<option >河北</option>
<option >遼寧</option>
<option >吉林</option>
<option >云南</option>
<option selected="selected">廣西</option>
</select>
<br>
<br>
愛好:<input name="hobby" type="checkbox">讀書
<input name="hobby" type="checkbox">寫字
<input name="hobby" type="checkbox" checked="checked">彈琴
<br>
<br>
個人簡介:
<br>
<br>
<textarea name="introduce" cols="30" rows="10">請在此輸入簡介</textarea>
<br>
<br>
個人網站:<input name="userurl" type="url">
<br>
<br>
個人郵箱:<input name="useremail" type="email">
<br>
<br>
身體體重:<input name="userweight" type="number">
<br>
<br>
出生日期:<input name="userdate" type="date">
<br>
<br>
詳細時間:<input name="usertime" type="time">
<br>
<br>
性格顏色:<input type="color" name="usercolor">
<br>
<br>
<input type="submit" value="開始注冊">
<input type="reset" value="重置信息">
<br>
<br>
</fieldset>
</form>
</body>
</html>
Html5增加了一些新的特性
- form屬性
Html5之前所有的表單屬性都要放到form里面,新增了form屬性后,每個標簽不用放到form里面
例如:
畢業院校:<input type="text" name="school" form="userform">
但是填寫form的時候要注意,一定要和上面的一樣,對應起來。
- datalist標簽
<datalist id="namesList">
<option value="gyy">高圓圓</option>
</datalist>
-
formxxxx屬性
例如,有兩個按鈕都在form表單里面,但他們的處理方式不一樣。show time
092.PNG
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML表單中的formxxx屬性</title>
</head>
<body>
<form>
username:<input type="text" name="un">
<br>
<br>
password:<input type="password" name="pw">
<br>
<br>
<input type="submit" value="注冊" formaction="regist url" formmethod="get" formtarget="_self" formenctype="application/x-www-form-urlencoded">
<input type="submit" value="登錄" formaction="login url" formmethod="post" formtarget="_blank" formenctype="application/x-www-form-urlencoded">
</form>
</body>
</html>