零.前言
本文只是作为私人学习笔记，源视频链接：11. HTML-CSS-常见标签和样式-tlias案例-顶部导航栏_哔哩哔哩_bilibili
一.表单项
二.表单标签
2.1表单标签
2.1.1源代码：
2.1.2结果展示：
2.2my表单标签
2.2.1源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
my表单标签
</title>
<style>
#div_Style
{
/* 设置主轴方向:竖直 */
flex-direction: column;
/* 设置主轴对齐方式:居中 */
justify-content: center;
}
h1{
/* <!-- 颜色设置为红色 --> */
color: red;
/* <!-- 字体设置为楷体 --> */
font-family: "楷体";
}
</style>
</head>
<body>
<h1>
<strong>
定义一个表单标签
</strong>
</h1>
<div>
<!-- 提交表单到一个免费可用的服务器 -->
<form action="https://httpbin.org/post" method="post">
姓名: <input type="text" name="name">
年龄: <input type="text" name="age">
账号： <input type="text" name="username">
密码: <input type="password" name="password">
<label>
<!-- 定义单选框
radio:单选框
value:提交的值
name:提交的名字 -->
<br>
性别:
<label><input type="radio" name ="gender" value = "man"> 男</label>
<label><input type="radio" name ="gender" value = "woman"> 女</label> <br><br>
<!-- 定义复选框
checkbox:复选框
value:提交的值
name:提交的名字 -->
爱好:
<label><input type="checkbox" name="hobby" value="reading"> 阅读</label>
<label><input type="checkbox" name="hobby" value="writing"> 写作</label>
<label><input type="checkbox" name="hobby" value="music"> 音乐</label>
<label><input type="checkbox" name="hobby" value="swimming"> 游泳</label>
<label><input type="checkbox" name="hobby" value="running"> 跑步</label>
</div>
</form><br>
<label><form>
<input type = "file" name = "file">
</form></label><br>
<!-- 定义时间，日期，日期时间 -->
<form>
时间: <input type="time" name="time">
日期: <input type="date" name="date">
日期时间: <input type="datetime-local" name="datetime">
</form><br>
<form>
<!-- 定义隐藏框 -->
<input type="hidden" name="hidden" value="隐藏"></input>
</form><br>
学历:<select name="degree">
<option value="">----------- 请选择 -----------</option>
<option value="1">大专</option>
<option value="2">本科</option>
<option value="3">硕士</option>
<option value="4">博士</option>
</select><br><br>
<form>
描述: <textarea name="description" cols="40" rows="20"></textarea>
</form>
<form>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="按钮">
</form><br><br>
</div>
</body>
</html>
2.2.2结果展示
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
