表单标签
<form action="http://127.0.0.1:5000/" method="get">
账号:<input type="text" name="username" id="username">
密码:<input type="password" name="pwd" id="pwd">
</form>
表单所有数据均保存在<form></form>
内。
action: 提交的地址
method:请求方式
输入框标签<input>
单行文本输入框 text
账号: <input type="text" name="username" id="username">
name作为提交表单的参数名
id 作为提交表单的唯一标识符
密码输入框
密码: <input type="password" name="password" id="password"><br>
单选框
性别: <input type="radio" name="gender" >男<input type="radio" name="gender" >女<br>
复选框
板块: <input type="checkbox" name="address">IT
<input type="checkbox" name="address">动漫
<input type="checkbox" name="address">学习<br>
上传文件按钮
头像:<input type="file"><br>
按钮
下拉框
省份:
<select>
<option value="广东">广东</option>
<option value="北京">北京</option>
<option value="江西">江西</option>
</select><br>
图片按钮
图片按钮:<input type="image" src="media/button.jpg"><br>
文本域
介绍:<textarea cols="30" rows="5"></textarea><br>
重置按钮
<input type="reset" value="重置">
提交按钮
<input type="submit" value="提交"><br>
内联框架
内联框架:<iframe src="https://www.baidu.com" height="500" width="1000"></iframe>
整体代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<h2>注册</h2>
<form action="http://127.0.0.1:5000/" method="get">
<label for="username">账号:</label>
<input type="text" name="username" id="username"><br>
密码: <input type="password" name="password" id="password"><br>
性别: <input type="radio" name="gender" >男<input type="radio" name="gender" >女<br>
板块: <input type="checkbox" name="address">IT
<input type="checkbox" name="address">动漫
<input type="checkbox" name="address">学习<br>
头像:<input type="file"><br>
按钮:<input type="button" value="这是一个普通按钮"><br>
省份:
<select>
<option value="广东">广东</option>
<option value="北京">北京</option>
<option value="江西">江西</option>
</select><br>
图片按钮:<input type="image" src="media/button.jpg"><br>
介绍:<textarea cols="30" rows="5"></textarea><br>
<input type="hidden" name="token" value="123456789123456789"><br>
<input type="reset" value="重置">
<input type="submit" value="提交"><br>
内联框架:<iframe src="https://www.baidu.com" height="500" width="1000"></iframe>
</form>
</body>
</html>
效果图:
![](https://img.haomeiwen.com/i24550344/9fcfb15aecc4407b.jpg)
网友评论