打造高效的前端开发环境 - 前端开发

微信公众号讲师中心

首页

文章

web3.0 后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发 UI设计计算机基础

编程手册

大前端 JavaScript 后端开发数据库移动端运维开发 UI设计计算机基础 XML Web Services

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

常用表单控件

<!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: 布尔属性,禁用,只能看,不能改,不能提交 -->
      <input
        type="text"
        id="uname"
        name="username"  
        value="admin"
        placeholder="用户名不少于6位"
        required
        readonly
        disabled
        form=""
      />
    </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>