HTML常用的登录表单标签使用
2022-08-25
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单标签</title>
</head>
<body>
<form action="http://httpbin.org/get" method="get" enctype="multipart/form-data">
这里是一个隐藏域输入框，用户看不到:
<input type="hidden" name="hidd" value="V1.0">
<br>
<label>账号:
<input type="text" name="username" value="" placeholder="这里输入账号">
</label><br>
<label>密码:
<input type="password" name="password" value="" maxlength="8" minlength="6" placeholder="这里输入密码">
</label><br>
<label>年龄:
<input type="number" name="age" value="" placeholder="这里输入年龄">
</label><br>
<label>出生年月:
<input type="date" name="born">
</label><br>
性别:
<label><input type="radio" name="sex" value="1"> 男</label>
<label><input type="radio" name="sex" value="2"> 女</label>
<label><input type="radio" name="sex" value="3"> 其他</label>
<br>
爱好:
<label><input type="checkbox" name="hob" value="1"> 健身</label>
<label><input type="checkbox" name="hob" value="2"> 游泳</label>
<label><input type="checkbox" name="hob" value="3"> 赚钱</label>
<label><input type="checkbox" name="hob" value="4"> 读书</label>
<label><input type="checkbox" name="hob" value="5"> 美女</label>
<br>
头像[单文件]:
<input type="file" name="avatar">
<br>
头像[多文件]:
<input type="file" multiple name="images[]">
<br>
个性签名:
<br>
<textarea name="description" cols="40" rows="5"></textarea>
<br>
<label>时间:
<input type="time" name="time">
</label>
<br>
城市:
<select name="city">
<option value="0"> 北京</option>
<option value="1"> 天津</option>
<option value="2"> 上海</option>
<option value="3"> 唐山</option>
<option value="4"> 洪洞</option>
<option value="5"> 其他</option>
</select>
<br>
<label>工资(这里禁止自己输入):
<input type="number" name="salary" value="3000" disabled placeholder="这里输入工资">
</label>
<br>
<label>本地日期时间:
<input type="datetime-local" name="datetime">
</label>
<br>
点击此处提交表单:
<input type="submit" value="提交表单">
<br>
这里是一个普通按钮:
<input type="button" value="普通按钮">
<br>
Button按钮:(可以是一张图片)
<button><img src="1.png" width="30" height="30" alt=""></button>
<br>
这是一个重置表单数据的按钮:
<input type="reset" value="重置">
</form>
</body>
</html>
效果
提交表单
{
"args": {
"age": "24",
"avatar": "",
"born": "2022-08-24",
"city": "4",
"datetime": "2022-08-25T05:08",
"description": "\u8fd9\u91cc\u662f\u4e2a\u6027\u7b7e\u540d\uff01",
"hidd": "V1.0",
"hob": [
"3",
"4",
"5"
],
"images[]": "",
"password": "123456",
"sex": "3",
"time": "11:04",
"username": "admin"
},
"headers": {
"Accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9",
"Accept-Encoding": "gzip, deflate",
"Accept-Language": "zh-CN,zh;q=0.9,en;q=0.8",
"Host": "httpbin.org",
"Upgrade-Insecure-Requests": "1",
"User-Agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36",
"X-Amzn-Trace-Id": "Root=1-6306e6c9-0f04dd854d934e2a2e641293"
},
"origin": "111.206.84.156",
"url": "http://httpbin.org/get?hidd=V1.0&username=admin&password=123456&age=24&born=2022-08-24&sex=3&hob=3&hob=4&hob=5&avatar=&images[]=&description=\u8fd9\u91cc\u662f\u4e2a\u6027\u7b7e\u540d\uff01&time=11%3A04&city=4&datetime=2022-08-25T05%3A08"
}