常用表单控件
<!DOCTYPE html>
<html lang="zh-CN">
<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>表单: 前后端数据交互的接口-2</title>
</head>
<body>
<!-- ! 用户注册 --><h2 class="title">用户注册</h2><form action="register.php" method="POST" enctype="application/x-www-form-urlencoded" target="_blank" id="register"><!-- 表单控件分组 --> <!-- <fieldset></fieldset>--><fieldset><legend>基本信息</legend> <!-- <legend>标题 </legend>--><!-- ! type="text" 单行文本框, 明文 (最常见的) --><!-- ! 变量名称定义 name="username"--><!-- ! 默认值 value="admin"--><!-- ! 输入提示 placeholder="用户名不少于6位"--><!-- ! 变量名称定义 name="username"--><!-- ! 变量名称定义 name="username"--><div class="username"><!-- ? 第一组合 label + input 标签名+控件 --><!-- ? label 与 input 绑定: label.for = input.id --><label for="uname">用户名:</label><!-- ? name + value : 名值对(或键值对)组合 --><!-- ? required: 布尔属性,表示必选项 --><!-- ? readonly: 布尔属性,只读,只能看,不能改,但会被提交 --><!-- ? disabled: 布尔属性,禁用,只能看,不能改,不能提交 --><inputtype="text"id="uname"name="username"value="admin"placeholder="用户名不少于6位"requiredreadonlydisabledform=""/></div><!-- ? type="password" 单行密码框 --><div class="password"><!-- ? label.for = input.id 组合 --><label for="psw">密码:</label><!-- ? name + value --><!-- placeholder 与 value 不能共存,否则value为主, value 默认值 --><input type="password" name="password" value="" id="psw" placeholder="不少于6位" required /><button type="button" onclick="this.previousElementSibling.type='text'">显示密码</button></div><!-- ? type="email" 自带验证规则 --><div class="email"><label for="email">邮箱:</label><input type="email" id="email" name="email" value="" placeholder="user@email.com" /></div><!-- ? type="number" (只能输入数字) --><div class="age"><label for="age">年龄:</label><!--* 1. min: 最小值(步长值)* 2. max: 最大值(步长值)* 3. step: 步长,递增或者递减数据* 4. value: 默认值--><input type="number" value="18" min="18" max="80" step="10" />岁</div><!-- ? type="date" (代表日期)--><div class="birthday"><label for="birthday">生日:</label><input type="date" name="birthday" value="2022-10-18" id="birthday" min="1949-10-01" max="2000-01-01" /></div><!-- id="birthday" min="1949-10-01" max="2000-01-01"(限定规则) --><!-- ? type="url" (验证网址 例 博客) --><div class="blog"><label for="blog">Blog:</label><input type="url" name="blog" placeholder="http://" /> <!-- 提示输入网址:placeholder="http://" --></div><!-- ? type="color" (拾色器 默认是黑色) --><div class="color"><label for="color">拾色器:</label><input type="color" name="color" value="#FFFF00" id="color" onchange="getColor(this)" /><output>#FFFF00</output></div>