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>
