2019-03-27
2019-03-27 本文已影响0人
蓝子_23d0
如何使用HTML的元素创建一个表单
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form >
<div class="username">
<label for="username">姓名：</label>
<input id="username"type="text" name="username" placeholder="用户名">
</div>
<div class = "password">
<label for="password">密码：</label>
<input id="password" type ="password" name="password" placeholder="请输入密码" >
</div>
<div class="sex">
<label>性别：</label>
<input type="radio" id="z" name="sex" value="男"><label for="z" >男 </label>
<input type="radio" id="x" name="sex" value="女"><label for="x" >女 </label>
</div>
<div class="love">
<label >取向：</label>
<input type="radio" id="y" name="love" value="男"><label for="y" >男 </label>
<input type="radio" id="s" name="love" value="女"><label for="s" >女 </label>
</div>
<div class="hobby">
<label for="hobby">爱好：</label>
<input type="checkbox" id="a" name="hobby" value="data"><label for="a" >data </label>
<input type="checkbox" id="b" name="hobby" value="travel"><label for="b" >旅游 </label>
<input type="checkbox" id="c" name="hobby" value="pet"><label for="c" >宠物 </label>
</div>
<div class="textarea">
<label for="comment">评论:</label>
<textarea name="comment" cols="30" rows="10">
ddd
</textarea>
</div>
<div class="select">
<label for="mycar">我的car：</label>
<select name="mycar">
<option value="laosilaisi">劳斯莱斯</option>
<option value="sabo" selected>萨博</option>
<option value="benchi">奔驰</option>
</select>
<input type="submit" value="提交">
</div>
</form>
</body>
</html>
实际效果如下：
image.png
