简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 打造高效的前端开发环境
Blogger Information
Blog 4
fans 0
comment 1
visits 2179
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
打造高效的前端开发环境
P粉190504886
Original
640 people have browsed it

常用表单控件

<!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>

  1. <!-- ! 用户注册 -->
  2. <h2 class="title">用户注册</h2>
  3.     <form action="register.php" method="POST" enctype="application/x-www-form-urlencoded" target="_blank" id="register">
  4.   <!-- 表单控件分组 -->  <!-- <fieldset></fieldset>-->
  5.   <fieldset>
  6.     <legend>基本信息</legend>   <!--  <legend>标题 </legend>-->
  7.     <!-- ! type="text" 单行文本框, 明文 (最常见的) -->
  8.     <!-- ! 变量名称定义 name="username"-->
  9.     <!-- ! 默认值  value="admin"-->
  10.     <!-- ! 输入提示 placeholder="用户名不少于6位"-->
  11.     <!-- ! 变量名称定义 name="username"-->
  12.     <!-- ! 变量名称定义 name="username"-->
  14.     <div class="username">
  15.       <!-- ? 第一组合 label + input    标签名+控件 -->
  16.       <!-- ? label 与 input 绑定:  label.for = input.id  -->
  17.       <label for="uname">用户名:</label>
  18.       <!-- ? name + value : 名值对(或键值对)组合  -->
  19.       <!-- ? required: 布尔属性,表示必选项 -->
  20.       <!-- ? readonly: 布尔属性,只读,只能看,不能改,但会被提交 -->
  21.       <!-- ? disabled: 布尔属性,禁用,只能看,不能改,不能提交 -->
  22.       <input
  23.         type="text"
  24.         id="uname"
  25.         name="username"  
  26.         value="admin"
  27.         placeholder="用户名不少于6位"
  28.         required
  29.         readonly
  30.         disabled
  31.         form=""
  32.       />
  33.     </div>
  35.     <!-- ? type="password" 单行密码框 -->
  36.     <div class="password">
  37.       <!-- ? label.for = input.id  组合 -->
  38.       <label for="psw">密码:</label>
  39.       <!-- ? name + value  -->
  40.       <!-- placeholder 与 value 不能共存,否则value为主, value 默认值 -->
  41.       <input type="password" name="password" value="" id="psw" placeholder="不少于6位" required />
  42.       <button type="button" onclick="this.previousElementSibling.type='text'">显示密码</button>
  43.     </div>
  45.     <!-- ? type="email" 自带验证规则 -->
  46.     <div class="email">
  47.       <label for="email">邮箱:</label>
  48.       <input type="email" id="email" name="email" value="" placeholder="user@email.com" />
  49.     </div>
  51.     <!-- ? type="number"  (只能输入数字) -->
  52.     <div class="age">
  53.       <label for="age">年龄:</label>
  55.       <!--
  56.         * 1. min: 最小值(步长值)
  57.         * 2. max: 最大值(步长值)
  58.         * 3. step: 步长,递增或者递减数据
  59.         * 4. value: 默认值
  60.        -->
  61.       <input type="number" value="18" min="18" max="80" step="10" />岁
  62.     </div>
  64.     <!-- ? type="date" (代表日期)-->
  65.     <div class="birthday">
  66.       <label for="birthday">生日:</label>
  67.       <input type="date" name="birthday" value="2022-10-18" id="birthday" min="1949-10-01" max="2000-01-01" />
  69.     </div>
  70.     <!-- id="birthday" min="1949-10-01" max="2000-01-01"(限定规则) -->
  71.     <!-- ? type="url"   (验证网址 例 博客) -->
  72.     <div class="blog">
  73.       <label for="blog">Blog:</label>
  74.       <input type="url" name="blog" placeholder="http://" />   <!-- 提示输入网址:placeholder="http://" -->
  75.     </div>
  77.     <!-- ? type="color"  (拾色器 默认是黑色) -->
  78.     <div class="color">
  79.       <label for="color">拾色器:</label>
  80.       <input type="color" name="color" value="#FFFF00" id="color" onchange="getColor(this)" />
  81.       <output>#FFFF00</output>
  82.     </div>
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：可以添加一张运行实例图，就更好了
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！