前端基础 - 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>
目录
相关文章
|
移动开发 前端开发 安全
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
1262 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
移动开发 前端开发 搜索推荐
《前端技术基础》第01章 HTML基础【合集】
超文本标记语言(HyperText Markup Language,简称 HTML)是构建网页结构的基础标记语言。它与 CSS、JavaScript 协同,负责搭建网页“骨架”,用标签组织内容,像标题、段落、图片等元素,通过起始与结束标签(部分可单用,如`<img>`)界定层级与布局,将信息有序整合。标签含特定语义,向浏览器传达展示方式,为网页准确呈现及后续美化、交互筑牢根基。
591 25
|
前端开发 JavaScript
|
移动开发 数据安全/隐私保护 UED
HTML表单标签详解:如何用HTML标签打造互动网页?
通过合理使用HTML表单标签,可以构建功能丰富、用户友好的互动网页。HTML表单的元素和属性提供了丰富的输入选项和验证功能,使得收集和处理用户输入成为可能。随着HTML5的发展,表单元素的功能性和用户体验将继续得到提升。开发者应充分利用这些工具,为用户打造流畅、互动性强的网页体验。
344 4
|
数据采集 数据安全/隐私保护
HTML表单标签和表单项标签示例
HTML表单标签和表单项标签示例
314 1
|
数据采集 数据库 C++
HTML中的表格、表单标签
HTML中的表格、表单标签
341 0
|
存储 JavaScript 前端开发
HTML表单标签大全并附有详细代码+案例
HTML表单标签大全并附有详细代码+案例
743 0