前端基础 - 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>
目录
相关文章
|
24天前
HTML 框架2
iframe标签用于在当前页面中嵌入另一个HTML页面。通过设置frameborder属性为&quot;0&quot;,可以移除iframe边框。iframe的src属性用于指定要嵌入的页面URL。例如,使用`&lt;iframe src=&quot;https://www.runoob.com&quot; frameborder=&quot;0&quot;&gt;&lt;/iframe&gt;`可以无边框地显示RUNOOB.COM页面。
|
24天前
HTML 框架1
HTML框架允许在同一个浏览器窗口中同时显示多个页面。`&lt;iframe&gt;`标签用于嵌入其他网页,基本语法为 `&lt;iframe src=&quot;URL&quot;&gt;&lt;/iframe&gt;`。可以通过设置 `height` 和 `width` 属性来调整 iframe 的大小,例如:`&lt;iframe src=&quot;demo_iframe.htm&quot; width=&quot;200&quot; height=&quot;200&quot;&gt;&lt;/iframe&gt;`。属性值可以是像素或百分比。
|
2月前
|
XML 前端开发 JavaScript
前端开发进阶:从HTML到React.js
【10月更文挑战第9天】前端开发进阶:从HTML到React.js
|
23天前
HTML 框架3
iframe 是一种在网页中嵌入另一个 HTML 页面的技术。通过设置 iframe 的属性,可以显示指定的目标链接页面。例如,可以使用 iframe 嵌入 RUNOOB.COM 网站。HTML 中的 `&lt;iframe&gt;` 标签用于定义内联框架。
|
2月前
|
JavaScript 前端开发 数据安全/隐私保护
前端技术分享:使用Vue.js构建响应式表单
【10月更文挑战第1天】前端技术分享:使用Vue.js构建响应式表单
|
2月前
|
存储 移动开发 UED
HTML5 的 form 的自动完成功能
在HTML5中,`&lt;form&gt;`元素具备自动完成功能,可根据用户历史输入提供建议,提高输入效率并改善体验。默认情况下,浏览器会自动开启此功能,也可通过设置`autocomplete`属性为`on`或`off`来明确开启或关闭。对于特定表单字段,如`&lt;input&gt;`,同样可以通过设置`autocomplete`属性控制自动完成行为。浏览器通过记录并存储用户的历史输入,在用户再次访问相同表单时提供相应的自动完成建议。
|
2月前
|
前端开发 JavaScript 数据安全/隐私保护
【前端基础篇】HTML零基础速通2
【前端基础篇】HTML零基础速通
20 2
|
2月前
|
Web App开发 移动开发 前端开发
【前端基础篇】HTML零基础速通1
【前端基础篇】HTML零基础速通
29 1
|
4月前
|
监控 数据可视化 前端开发
【前端】政务服务大数据可视化监控平台(源码+html+css+js)
【前端】政务服务大数据可视化监控平台(源码+html+css+js)
|
6月前
|
XML 前端开发 JavaScript
前端简介(HTML+CSS+JS)
前端简介(HTML+CSS+JS)