前端基础 - HTML框架集之Form表单

简介: 前端基础 - HTML框架集之Form表单

Form表单

效果图:

代码实现:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="../css/案例实现.css" />
  </head>
  <body>
    <!--外层先来一个div,设置边框-->
    <div id="div1">
      <form>
        <table>
          <!--提示-->
          <tr>
            <td><h1 id="h001">会员注册</h1></td>
            <td colspan="2">USER REGISTER </td>
          </tr>
          <!--用户名-->
          <tr>
            <td>用户名:</td>
            <td colspan="2">
              <input type="text" name="username"/>
            </td>
          </tr>
          <!--密码-->
          <tr>
            <td>密码:</td>
            <td colspan="2">
              <input type="password" name="password"/>
            </td>
          </tr>
          <!--确认密码-->
          <tr>
            <td>确认密码:</td>
            <td colspan="2">
              <input type="password" name="repassword"/>
            </td>
          </tr>
          <!--email-->
          <tr>
            <td>Email:</td>
            <td colspan="2">
              <input type="text" name="email"/>
            </td>
          </tr>
          <!--姓名-->
          <tr>
            <td>姓名:</td>
            <td colspan="2">
              <input type="text" name="name"/>
            </td>
          </tr>
          <!--性别-->
          <tr>
            <td>性别:</td>
            <td colspan="2">
              男<input type="radio" name="sex" value="01"/>
              女<input type="radio" name="sex" value="02" checked="checked"/>
            </td>
          </tr>
          <!--出生日期-->
          <tr>
            <td>出生日期:</td>
            <td colspan="2">
              <input type="text" name="birth"/>
            </td>
          </tr>
          <!--验证码-->
          <tr>
            <td>验证码:</td>
            <td>
              <input type="text" name="yzm"/>
            </td>
            <td>
              <input type="image" src="../img/captcha.jhtml" />
            </td>
          </tr>
          <!--注册按钮-->
          <tr>
            <td colspan="3" align="center">
              <input id="btn001" type="submit" value="注册"/>
            </td>
          </tr>
        </table>
      </form>
    </div>
  </body>
</html>
目录
相关文章
|
11月前
|
JavaScript 前端开发 Java
制造业ERP源码,工厂ERP管理系统,前端框架:Vue,后端框架:SpringBoot
这是一套基于SpringBoot+Vue技术栈开发的ERP企业管理系统,采用Java语言与vscode工具。系统涵盖采购/销售、出入库、生产、品质管理等功能,整合客户与供应商数据,支持在线协同和业务全流程管控。同时提供主数据管理、权限控制、工作流审批、报表自定义及打印、在线报表开发和自定义表单功能,助力企业实现高效自动化管理,并通过UniAPP实现移动端支持,满足多场景应用需求。
1070 1
|
前端开发 Java 物联网
智慧班牌源码,采用Java + Spring Boot后端框架,搭配Vue2前端技术,支持SaaS云部署
智慧班牌系统是一款基于信息化与物联网技术的校园管理工具,集成电子屏显示、人脸识别及数据交互功能,实现班级信息展示、智能考勤与家校互通。系统采用Java + Spring Boot后端框架,搭配Vue2前端技术,支持SaaS云部署与私有化定制。核心功能涵盖信息发布、考勤管理、教务处理及数据分析,助力校园文化建设与教学优化。其综合性和可扩展性有效打破数据孤岛,提升交互体验并降低管理成本,适用于日常教学、考试管理和应急场景,为智慧校园建设提供全面解决方案。
667 70
|
12月前
|
JavaScript 前端开发 API
|
移动开发 前端开发 安全
|
安全 前端开发 开发工具
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
694 5
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
937 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
前端开发 JavaScript
|
移动开发 数据安全/隐私保护 UED
HTML表单标签详解:如何用HTML标签打造互动网页?
通过合理使用HTML表单标签,可以构建功能丰富、用户友好的互动网页。HTML表单的元素和属性提供了丰富的输入选项和验证功能,使得收集和处理用户输入成为可能。随着HTML5的发展,表单元素的功能性和用户体验将继续得到提升。开发者应充分利用这些工具,为用户打造流畅、互动性强的网页体验。
309 4

热门文章

最新文章