<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--表单用于向服务器发送用户提交的信息，表单由form标签组成，-->
<!--action设置提交数据的地址-->
<!--method设置提交的方式为POST还是get,默认为get-->
<!--onsubmit设置表单提交时的触发事件的按钮-->
<form action="#">
<div>
<!--div标签是块级元素可以让里面的标签以列的形式存在-->
<!--lable标签用于表单显示文字 for属性用于绑定input标签中的id值以此来表示它绑定的那个input-->
<label for="name">请输入用户名</label>
<input type="text" id="name" name="username" >
</div>
<div>
<label for="password">请输入密码</label>
<input type="password" id="password" name="password" >
</div>
</form>
</body>
</html>
下拉列表的实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--表单用于向服务器发送用户提交的信息，表单由form标签组成，-->
<!--action设置提交数据的地址-->
<!--method设置提交的方式为POST还是get,默认为get-->
<!--onsubmit设置表单提交时的触发事件的按钮-->
<form action="#">
<div>
<!--select用于实现一个下拉列表 -->
<select name="x1" id="x1">
<!--option是列表项-->
<option value="1">大学</option>
<option value="1">中学</option>
<option value="1">小学</option>
</select>
</div>
</form>
</body>
</html>
大学 中学 小学
实现单选框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--表单用于向服务器发送用户提交的信息，表单由form标签组成，-->
<!--action设置提交数据的地址-->
<!--method设置提交的方式为POST还是get,默认为get-->
<!--onsubmit设置表单提交时的触发事件的按钮-->
<form action="#">
<div>
<!--select用于实现一个下拉列表 -->
<select name="x1" id="x1">
<!--option是列表项-->
<option value="1">大学</option>
<option value="1">中学</option>
<option value="1">小学</option>
</select>
</div>
<div>
<!--实现一个单选框-->
<label for="sex">性别</label>
<!--name属性设置为同一个,设置默认属性选中状态-->
<input type="radio" name="sex" value="1" checked />男
<input type="radio" name="sex" value="2" />女
</div>
</form>
</body>
</html>
实现多选框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--表单用于向服务器发送用户提交的信息，表单由form标签组成，-->
<!--action设置提交数据的地址-->
<!--method设置提交的方式为POST还是get,默认为get-->
<!--onsubmit设置表单提交时的触发事件的按钮-->
<form action="#">
<label for="name">用户</label>
<!--占位符 placeholder-->
<input type="text" id="name" name="username" placeholder="请输入用户名" >
</div>
<div>
<label for="password">密码</label>
<input type="password" id="password" name="password" placeholder="请输入密码" >
</div>
<div>
<!--select用于实现一个下拉列表 -->
<select name="x1" id="x1">
<!--option是列表项-->
<option value="1">大学</option>
<option value="1">中学</option>
<option value="1">小学</option>
</select>
</div>
<div>
<!--实现一个单选框-->
<label for="sex">性别</label>
<!--name属性设置为同一个,设置默认属性选中状态-->
<input type="radio" name="sex" value="1" checked />男
<input type="radio" name="sex" value="2" />女
</div>
<div>
<!-- 多选框 checked属性为默认值-->
<label for="like" name="like1">爱好</label>
<input type="checkbox" name="like1"/>编程
<input type="checkbox"name="like1" checked />跑步
<input type="checkbox" name="like1" />唱歌
</div>
<div>
<label for="demo">简历</label>
<!-- 设置文本域-->
<textarea name="demo" id="demo" cols="30" rows="10" >
</textarea>
</div>
<div>
<input type="submit" value="注册" />
<input type="reset"重置" />
</div>
</form>
</body>
</html>
240
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
