HTML表单的用法
2016-12-29 本文已影响12人
小松鼠hust
HTML表单用于用户向服务器端提交表单数据，用法为<form>提交的表单数据区域</form>。用form标签包裹着表单控件，如input, button, submit,select, label等标签。当用户输入完数据，按button或者submit提交按钮提交后，表单里的数据会发送给服务器端，具体地址是form的action属性值，提交的方式采用form中method规定的方式，如get或者post。不同的表单控件用法请参考MDN.
例子
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<title>form</title>
</head>
<body>
<form id="user-register" action = "user-register.php" method="get">
<div class="name">
<label for="user-name">姓名：</label>
<input type="text" id="user-name" name = "name" placeholder="用户名">
</div>
<div class="password">
<label for="password">密码：</label>
<input type="password" id="password" name = "password">
</div>
<div class="sex">
<label for="sex">性别：</label>
<input type="radio" id="sex" name = "sex" value="male" checked> 男
<input type="radio" name = "sex" value="female"> 女
</div>
<div class="sex-prefer">
<label for="sex-prefer">取向：</label>
<input type="radio" id="sex-prefer" name = "sex-prefer" value="male"> 男
<input type="radio" name = "sex-prefer" value="female"> 女
</div>
<div class="hobby">
<label>爱好：</label>
<input type="checkbox" id="hobby" name="hobby" value="dota"> dota
<input type="checkbox" id="hobby" name="hobby" value="travel"> 旅游
<input type="checkbox" id="hobby" name="hobby" value="pet"> 宠物
</div>
<div class="comments">
<label for="comments">评论：</label>
<textarea name="comments" id="comments" cols="30" rows="6">输入评论：
</textarea>
</div>
<div>
<label id="mycars">我的cars：</label>
<select name="cars" id="mycars">
<option value="sabo">萨博</option>
<option value="polo">大众polo</option>
<option value="focus">福克斯</option>
</select>
</div>
<button>提交</button>
<!--<
input type = "submit" value = "提交">
-->
</form>
</body>
</html>
效果图：
form-dome.JPG
