首页 > 代码库 > HTML基础（表单和输入，框架）

HTML基础（表单和输入，框架）

2024-09-11 09:54:31   220人阅读

---恢复内容开始---

HTML 表单和输入

  • HTML 布局

HTML 表单用于搜集不同类型的用户输入。

实例

文本域 (Text field)
本例演示如何在 HTML 页面创建文本域。用户可以在文本域中写入文本。
技术分享

 

密码域
本例演示如何创建 HTML 的密码域。
技术分享

 

（可以在本页底端找到更多实例。）

表单

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。

表单使用表单标签（<form>）定义。

<form>
...
  input 元素
...
</form>

输入

多数情况下被用到的表单标签是输入标签（<input>）。输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：

文本域（Text Fields）

当用户要在表单中键入字母、数字等内容时，就会用到文本域。

<form>
First name: 
<input type="text" name="firstname" />
<br />
Last name: 
<input type="text" name="lastname" />
</form>

浏览器显示如下：

First name:
Last name:

注意，表单本身并不可见。同时，在大多数浏览器中，文本域的缺省宽度是20个字符。

单选按钮（Radio Buttons）

当用户从若干给定的的选择中选取其一时，就会用到单选框。

<form>
<input type="radio" name="sex" value="http://www.mamicode.com/male" /> Male
<br />
<input type="radio" name="sex" value="http://www.mamicode.com/female" /> Female
</form>

浏览器显示如下：

Male
Female

注意，只能从中选取其一。

复选框（Checkboxes）

当用户需要从若干给定的选择中选取一个或若干选项时，就会用到复选框。

<form>
<input type="checkbox" name="bike" />
I have a bike
<br />
<input type="checkbox" name="car" />
I have a car
</form>

浏览器显示如下：

I have a bike
I have a car

表单的动作属性（Action）和确认按钮

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

<form name="input" action="html_form_action.asp" method="get">
Username: 
<input type="text" name="user" />
<input type="submit" value="http://www.mamicode.com/Submit" />
</form>

浏览器显示如下：

Username:

假如您在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 "html_form_action.asp" 的页面。该页面将显示出输入的结果。

更多实例

复选框
本例演示如何在 HTML 页中创建复选框。用户可以选中或取消选取复选框。
技术分享

 

单选按钮
本例演示如何在 HTML 中创建单选按钮。
简单的下拉列表
本例演示如何在 HTML 页面中创建简单的下拉列表框。下拉列表框是一个可选列表。
技术分享

 


 

另一个下拉列表
本例演示如何创建一个简单的带有预选值的下拉列表。（编者注：预选值指预先指定的首选项。）
技术分享

 

文本域(Textarea)
本例演示如何创建文本域（多行文本输入控件）。用户可在文本域中写入文本。可写入字符的字数不受限制。
技术分享

 

创建按钮
本例演示如何创建按钮。你可以对按钮上的文字进行自定义。
技术分享

 

Fieldset around data
本例演示如何在数据周围绘制一个带标题的框。
技术分享

 

表单实例

带有输入框和确认按钮的表单
本例演示如何向页面添加表单。此表单包含两个输入框和一个确认按钮。
技术分享

 

带有复选框的表单
此表单包含三个复选框和一个确认按钮。
技术分享

 

带有单选按钮的表单
此表单包含两个单选框和一个确认按钮。
技术分享

 

从表单发送电子邮件
此例演示如何从表单发送电子邮件。
技术分享

技术分享

 

HTML 框架

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。

实例

垂直框架
本例演示：如何使用三份不同的文档制作一个垂直框架。
技术分享

 

水平框架
本例演示：如何使用三份不同的文档制作一个水平框架。

（可以在本页底端找到更技术分享

 

多实例。）

框架

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。

使用框架的坏处：

  • 开发人员必须同时跟踪更多的HTML文档
  • 很难打印整张页面
框架结构标签（<frameset>）
  • 框架结构标签（<frameset>）定义如何将窗口分割为框架
  • 每个 frameset 定义了一系列行或列
  • rows/columns 的值规定了每行或每列占据屏幕的面积

编者注：frameset 标签也被某些文章和书籍译为框架集。

框架标签（Frame）

Frame 标签定义了放置在每个框架中的 HTML 文档。

在下面的这个例子中，我们设置了一个两列的框架集。第一列被设置为占据浏览器窗口的 25%。第二列被设置为占据浏览器窗口的 75%。HTML 文档 "frame_a.htm" 被置于第一个列中，而 HTML 文档 "frame_b.htm" 被置于第二个列中：

<frameset cols="25%,75%">
   <frame src="http://www.mamicode.com/frame_a.htm">
   <frame src="http://www.mamicode.com/frame_b.htm">
</frameset>

基本的注意事项 - 有用的提示：

假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 <frame> 标签中加入：noresize="noresize"。

为不支持框架的浏览器添加 <noframes> 标签。

重要提示：不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用！不过，假如你添加包含一段文本的 <noframes> 标签，就必须将这段文字嵌套于 <body></body> 标签内。（在下面的第一个实例中，可以查看它是如何实现的。）

更多实例

如何使用 <noframes> 标签
本例演示：如何使用 <noframes> 标签。
技术分享

 

混合框架结构
本例演示如何制作含有三份文档的框架结构，同时将他们混合置于行和列之中。边框可以移动。
技术分享

 

含有 noresize="noresize" 属性的框架结构
本例演示 noresize 属性。在本例中，框架是不可调整尺寸的。在框架间的边框上拖动鼠标，你会发现边框是无法移动的。
技术分享

 

导航框架
本例演示如何制作导航框架。导航框架包含一个将第二个框架作为目标的链接列表。名为 "contents.htm" 的文件包含三个链接。
技术分享

 

内联框架
本例演示如何创建内联框架（HTML 页中的框架）。
技术分享

 

跳转至框架内的一个指定的节
本例演示两个框架。其中的一个框架设置了指向另一个文件内指定的节的链接。这个"link.htm"文件内指定的节使用 <a name="C10"> 进行标识。
技术分享

 

使用框架导航跳转至指定的节
本例演示两个框架。左侧的导航框架包含了一个链接列表，这些链接将第二个框架作为目标。第二个框架显示被链接的文档。导航框架其中的链接指向目标文件中指定的节。
技术分享

 HTML Iframe

 

添加 iframe 的语法

<iframe src="http://www.mamicode.com/URL"></iframe>

URL 指向隔离页面的位置。

Iframe - 设置高度和宽度

height 和 width 属性用于规定 iframe 的高度和宽度。

属性值的默认单位是像素，但也可以用百分比来设定（比如 "80%"）。

实例

<iframe src="http://www.mamicode.com/demo_iframe.htm" width="200" height="200"></iframe>

亲自试一试

技术分享

 

Iframe - 删除边框

frameborder 属性规定是否显示 iframe 周围的边框。

设置属性值为 "0" 就可以移除边框：

实例

<iframe src="http://www.mamicode.com/demo_iframe.htm" frameborder="0"></iframe>

亲自试一试

技术分享

 

使用 iframe 作为链接的目标

iframe 可用作链接的目标（target）。

链接的 target 属性必须引用 iframe 的 name 属性：

实例

<iframe src="http://www.mamicode.com/demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>
技术分享

 

HTML 4.01 快速参考

  • HTML 颜色名

来自 W3School 的 HTML 快速参考。可以打印它，以备日常使用。

HTML Basic Document

<html>
<head>
<title>Document name goes here</title>
</head>
<body>
Visible text goes here
</body>
</html>

Text Elements

<p>This is a paragraph</p>
<br> (line break)
<hr> (horizontal rule)
<pre>This text is preformatted</pre>

Logical Styles

<em>This text is emphasized</em>
<strong>This text is strong</strong>
<code>This is some computer code</code>

Physical Styles

<b>This text is bold</b>
<i>This text is italic</i>

Links, Anchors, and Image Elements

<a href="http://www.example.com/">This is a Link</a>
<a href="http://www.example.com/"><img src="http://www.mamicode.com/URL"
alt="Alternate Text"></a>
<a href="mailto:webmaster@example.com">Send e-mail</a>A named anchor:
<a name="tips">Useful Tips Section</a>
<a href="http://www.mamicode.com/#tips">Jump to the Useful Tips Section</a>

Unordered list

<ul>
<li>First item</li>
<li>Next item</li>
</ul>

Ordered list

<ol>
<li>First item</li>
<li>Next item</li>
</ol>

Definition list

<dl>
<dt>First term</dt>
<dd>Definition</dd>
<dt>Next term</dt>
<dd>Definition</dd>
</dl>

Tables

<table border="1">
<tr>
  <th>someheader</th>
  <th>someheader</th>
</tr>
<tr>
  <td>sometext</td>
  <td>sometext</td>
</tr>
</table>

Frames

<frameset cols="25%,75%">
  <frame src="http://www.mamicode.com/page1.htm">
  <frame src="http://www.mamicode.com/page2.htm">
</frameset>

Forms

<form action="http://www.example.com/test.asp" method="post/get">
<input type="text" name="lastname"
value="http://www.mamicode.com/Nixon" size="30" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit">
<input type="reset">
<input type="hidden">
<select>
<option>Apples
<option selected>Bananas
<option>Cherries
</select>
<textarea name="Comment" rows="60"
cols="20"></textarea>
</form>

Entities

&lt; is the same as <
&gt; is the same as >
&#169; is the same as ?

Other Elements

<!-- This is a comment -->
<blockquote>
Text quoted from some source.
</blockquote>
<address>
Address 1<br>
Address 2<br>
City<br>
</address>

HTML基础（表单和输入，框架）


联系
我们