HTML——input标记的典型应用(制作简单信息表单)

简介: HTML——input标记的典型应用(制作简单信息表单)

web这块的知识整理只能上图了 因为要不中间代码会在打开的网页上自动运行 看不见代码根本


HTML文档结构



运行图:



代码如下:


<html>
<head>
<title>&lt;input&gt;标记的典型应用</title>
</head>
<body><form action="" method="post" name="myform">
<table width="694" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td><img src="images/01.gif" width="694" height="168"></td>
  </tr>
</table>
  <table width="694" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
      <td width="103" height="231" valign="top"><img src="images/02.gif" width="35"></td>
      <td width="547" valign="top"><table width="100%"  border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="17%" height="29" align="center">用 户 名:</td>
            <td colspan="2"><input name="username" type="text" id="UserName4" maxlength="20"></td>
          </tr>
          <tr>
            <td height="28" align="center">密&nbsp;&nbsp;&nbsp;&nbsp;码:</td>
            <td height="28" colspan="2"><input name="pwd1" type="password" id="PWD14" size="20" maxlength="20"></td>
          </tr>
          <tr>
            <td height="28" align="center">确认密码:</td>
            <td height="28" colspan="2"><input name="pwd2" type="password" id="PWD25" size="20" maxlength="20"></td>
          </tr>
          <tr>
            <td height="28" align="center">性&nbsp;&nbsp;&nbsp;&nbsp;别:</td>
            <td colspan="2"><input name="sex" type="radio" class="noborder" value="男" checked>
              男&nbsp;
              <input name="sex" type="radio" class="noborder" value="女">
              女</td>
          </tr>
          <tr>
            <td height="28" align="center">爱&nbsp;&nbsp;&nbsp;&nbsp;好:</td>
            <td colspan="2" class="word_grey"><input name="like" type="checkbox" id="like" value="体育">              
            体育
            <input name="like" type="checkbox" id="like" value="旅游">
            旅游
            <input name="like" type="checkbox" id="like" value="听音乐">
            听音乐
            <input name="like" type="checkbox" id="like" value="看书">
            看书</td>
          </tr>
          <tr>
            <td height="28" align="center" style="padding-left:10px">E-mail:</td>
            <td colspan="2" class="word_grey"><input name="email" type="text" id="PWD224" size="50">            </td>
          </tr>
          <tr>
            <td height="34">&nbsp;</td>
            <td width="30%" class="word_grey"><input name="Submit" type="submit" class="btn_grey" value="确定保存">
            <input name="Reset" type="reset" class="btn_grey" id="Reset" value="重新填写"></td>
            <td width="53%" class="word_grey"><input type="image" name="imageField" src="images/btn_bg.jpg"></td>
          </tr>
      </table></td>
      <td width="44" valign="top"><img src="images/04.gif" width="44"></td>
    </tr>
  </table>
</form>
</body>
</html>
相关文章
|
16天前
利用html2canvas插件自定义生成名片信息并保存图片
这是一个利用html2canvas插件自定义生成名片信息并保存图片,自定义上传头像,自定义输入个人信息内容,自定义图片名称,并将生成的图片保存到本地
31 1
利用html2canvas插件自定义生成名片信息并保存图片
|
16天前
|
移动开发 UED HTML5
HTML 表单和输入7
HTML 表单标签包括 `&lt;form&gt;`、`&lt;input&gt;`、`&lt;textarea&gt;`、`&lt;label&gt;`、`&lt;fieldset&gt;`、`&lt;legend&gt;`、`&lt;select&gt;`、`&lt;optgroup&gt;`、`&lt;option&gt;` 和 `&lt;button&gt;` 等,用于创建用户输入界面。HTML5 新增了 `&lt;datalist&gt;`、`&lt;keygen&gt;` 和 `&lt;output&gt;` 标签,增强了表单的功能和用户体验。
|
16天前
HTML 表单和输入6
提交按钮 `&lt;input type=&quot;submit&quot;&gt;` 用于将表单数据发送到服务器。表单的 `action` 属性指定接收数据的服务器文件,而 `method` 属性定义了提交方式(`get` 或 `post`)。`get` 方法将数据附加在 URL 后,适用于非敏感信息;`post` 方法将数据包含在请求体中,适用于敏感数据。示例展示了如何使用这两种方法提交表单。
|
12天前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
24 3
|
14天前
|
机器学习/深度学习 移动开发 自然语言处理
HTML5与神经网络技术的结合有哪些其他应用
HTML5与神经网络技术的结合有哪些其他应用
31 3
|
18天前
HTML 表单和输入5
复选框(Checkboxes)由 `&lt;input type=&quot;checkbox&quot;&gt;` 定义,允许用户选择一个或多个选项。
|
18天前
HTML 表单和输入3
HTML 表单中的 `&lt;input&gt;` 标签是最常用的表单元素,其类型由 `type` 属性定义。常见的输入类型包括文本域(`&lt;input type=&quot;text&quot;&gt;`),用于用户在表单中输入字母和数字。
|
18天前
|
数据安全/隐私保护
HTML 表单和输入4
密码字段使用 `&lt;input type=&quot;password&quot;&gt;` 定义,输入的字符会被隐藏为星号或圆点。单选按钮使用 `&lt;input type=&quot;radio&quot;&gt;` 定义,用户只能选择一个选项。
|
3月前
|
移动开发 数据安全/隐私保护 UED
HTML表单标签详解:如何用HTML标签打造互动网页?
通过合理使用HTML表单标签,可以构建功能丰富、用户友好的互动网页。HTML表单的元素和属性提供了丰富的输入选项和验证功能,使得收集和处理用户输入成为可能。随着HTML5的发展,表单元素的功能性和用户体验将继续得到提升。开发者应充分利用这些工具,为用户打造流畅、互动性强的网页体验。
47 4