<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html表单</title>
</head>
<body>
<!-- form:
action属性:表单提交的地址
method属性:表单提交的方法
-->
<!-- 使用get请求提交表单 -->
<form action="" method="get">
账号:<input type="text" name='user' >
<br>
密码:<input type="password" name='pwd'>
<br>
<input type="submit">
<!--
input:表单输入
type属性的类型:
text:文本输入框
password:密码输入框
submit:表单提交按钮
name属性:设置表单项提交参数的名称
-->
</form>
<hr>
<!-- 使用post请求提交表单 -->
<form action="" method="post">
账号:<input type="text" name='username' >
<br>
密码:<input type="password" name='pwd2'>
<br>
<input type="submit">
<!--
input:表单输入
type属性的类型:
text:文本输入框
password:密码输入框
submit:表单提交按钮
name属性:设置表单项提交参数的名称
-->
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>注册页面</h1>
<hr>
<form action="">
<div>昵称: <input type="text" name='user'></div>
<div>密码: <input type="password" name=pwd></div>
<!-- 单选框:radio -->
<div>性别:
男<input type="radio" name='sex' value=1>
女<input type="radio" name='sex' value=2>
</div>
<!-- 多选框 :checkbox-->
<div>
技能:
python <input type="checkbox" name='kill' value="py">
java <input type="checkbox" name='kill' value="java">
php <input type="checkbox" name='kill' value="php">
go <input type="checkbox" name='kill' value="go">
</div>
<!-- 日期选择框 -->
<div>
出生日期:<input type="date" name='da'>
</div>
<!--颜色选择框 -->
<div>
喜欢的颜色 <input type="color" name='co'>
</div>
<!-- 文件上传 -->
<div>
<input type="file" name='pic'>
</div>
<!-- 普通按钮 -->
<input type="button" value="按钮111">
<button>按钮222</button>
<!-- 表单重置 -->
<input type="reset">
<!-- 使用图片作为按钮 -->
<input type="image">
<!-- 设置隐藏的表单项 -->
<input type="hidden" name='key' value="567890">
<!-- input的其他属性:
placeholder:设置input输入框的提示信息
readonly: 设置表单只读(不能输入修改)
disabled:禁用
required:设置为必填项
-->
<div>
<input type="text" placeholder="请输入账号">
<input type="text" readonly value="1234567890">
<input type="number" name='n' disabled>
</div>
<!-- 大文本输入框 -->
<div>
个人介绍
<textarea rows="10" cols="50" disabled></textarea>
</div>
<!-- 下拉选择框的实现 -->
<div>
城市
<select name="city" id="">
<option value="cs">长沙</option>
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="sz">深圳</option>
<option value="gz">广州</option>
</select>
</div>
<!-- 表单提交 -->
<div><input type="submit"></div>
</form>
</body>
</html>
label标签
label 标签为 input 元素定义标注(标记)。
label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在
label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将
焦点转到和标签相关的表单控件上。
label 标签的 for 属性应当与相关元素的 id 属性相同
<form>
<label for="user">账号:</label>
<input type="text" name="username" id="user" />
<br />
<label for="pw">密码:</label>
<input type="password" name="password" id="pw" />
</form>