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>
相关文章
|
26天前
|
移动开发 HTML5
HTML5 表单属性3
`&lt;input&gt;` 标签的 `formaction`、`formenctype` 和 `formmethod` 属性分别用于指定表单提交的 URL 地址、数据编码类型和提交方法,这些属性可覆盖 `&lt;form&gt;` 标签中的相应属性,并且主要适用于 `type=&quot;submit&quot;` 和 `type=&quot;image&quot;` 的输入类型。
|
25天前
|
移动开发 JavaScript 前端开发
HTML5 表单属性7
`pattern` 属性使用正则表达式验证 `&lt;input&gt;` 元素的值,适用于 `text`, `search`, `url`, `tel`, `email`, 和 `password` 类型。
|
25天前
|
移动开发 UED HTML5
HTML5 表单属性6
`min`、`max` 和 `step` 属性用于限制 `&lt;input&gt;` 标签中的数值或日期范围。例如,可以设置日期选择器的最早和最晚日期,或限制数字输入框的值范围。`multiple` 属性允许在 `&lt;input&gt;` 中选择多个值,适用于邮箱和文件类型。这些属性增强了表单控件的功能性和用户体验。
|
25天前
|
移动开发 HTML5
HTML5 表单属性5
`height` 和 `width` 属性用于 `&lt;input&gt;` 标签中的 `image` 类型,定义图像的高度和宽度。
|
26天前
|
移动开发 HTML5
HTML5 表单属性4
`formnovalidate` 属性是一个布尔属性,用于 `&lt;input&gt;` 元素,指示该输入在表单提交时不需验证,可覆盖 `&lt;form&gt;` 元素的 `novalidate` 属性,常与 `type=&quot;submit&quot;` 一起使用。示例中展示了如何通过两个提交按钮(一个使用验证,另一个不使用)实现不同的表单提交方式。
|
26天前
|
移动开发 JavaScript 前端开发
HTML5 表单属性2
`novalidate` 是 HTML `&lt;form&gt;` 元素的布尔属性,用于禁用浏览器的默认表单验证功能。当此属性存在时,浏览器不会检查表单字段是否符合预设的验证规则,允许开发者通过 JavaScript 等手段自定义验证逻辑。
|
24天前
|
移动开发 数据安全/隐私保护 HTML5
HTML5 表单属性8
`required`属性确保表单提交前输入框不能为空,适用于多种类型的 `&lt;input&gt;` 标签,如文本、邮箱、密码等。`step`属性则用于指定输入域中合法数值的间隔,常与`max`和`min`属性配合使用,适用于数字、日期等类型。例如,设置`&lt;input type=&quot;number&quot; step=&quot;3&quot;&gt;`可使输入值以3为单位递增或递减。
|
28天前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
56 7