正文

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

somsom  2022-02-08  658

关键词：

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

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>

浏览器显示如下：

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

单选按钮（Radio Buttons）

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

<form>
<input type="radio" name="sex" value="male" /> Male
<br />
<input type="radio" name="sex" value="female" /> Female
</form>

浏览器显示如下：

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

复选框（Checkboxes）

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

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

浏览器显示如下：

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

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

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

浏览器显示如下：

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

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="frame_a.htm">
   <frame src="frame_b.htm">
</frameset>

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

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

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

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

添加 iframe 的语法

<iframe src="URL"></iframe>

URL 指向隔离页面的位置。

Iframe - 设置高度和宽度

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

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

实例

<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

亲自试一试

Iframe - 删除边框

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

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

实例

<iframe src="demo_iframe.htm" frameborder="0"></iframe>

亲自试一试

使用 iframe 作为链接的目标

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

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

实例

<iframe src="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 快速参考

来自 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="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="#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="page1.htm">
  <frame src="page2.htm">
</frameset>

Forms

<form action="http://www.example.com/test.asp" method="post/get">
<input type="text" name="lastname"
value="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基础表单(代码片段)

表单的工作原理简单来说就是客户在浏览器输入信息之后，浏览器将用户在表单中的数据进行打包发送给服务器，服务器接收到之后进行处理，如下图语法<form>表单元素</form>form标签的属性常用的表单元素以下这些&... 查看详情

html5表单元素基础

表单元素1、定义：表单是提供让读者在网页上输入，勾选和选取数据，以便提交给服务器数据库的工具。（邮箱注册，用户登录，调查问卷等）2、表单元素（下拉框，输入框……）3、表单主结构：<formaction=""></form>作... 查看详情

01html基础03

day03HTML表单表单 <form> 表单元素 </form> 注意：表单本身不可见 <input> 表单输入标签 <select> 菜单和列表标签 <option> 菜单和列表项目标签 <textarea> 文字域标签 <optgroup> 菜单和列表项目分组标签 <... 查看详情

前端html基础知识表单

html表单　　表单的标签是<form>，用于给网站的后台提交数据。提交的数据格式原本是什么样不太清楚，以python的flask框架来看，我从表单中得到的数据是一个字典（flask.request.form），可以从中获取到表单中提交上来的数据。... 查看详情

html基础-3（框架表单与表格等）

<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> </head> <body>  <iframesrc=" 查看详情

html基础复习表单

表单-----<form>用于收集不同类型的用户输入最常用的输入元素　　1、<input>,根据类型type属性可以设置不同的输入类型：　　　　type="text"：文本域，文本域的缺省宽度是20个字符　　　　type="password"：密码字段　　　　ty... 查看详情

web开发——html基础（html表单）

　　参考：http://www.w3school.com.cn/html/html_forms.asp　　HTML表单用于搜集不同类型的用户输入。1、<form>元素　　HTML表单用于收集用户输入。　　<form>元素定义HTML表单：1.1<input>元素　　<input> 元素是最重要的表... 查看详情

html表单和输入

HTML表单表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。表单使用表单标签<form>来设置:<form>.input元素.</form> ... 查看详情

web前端html基础2

表单标签<form></form>input系列标签　　　text文本输入框　　placeholder默认的属性，输入时消失　　password密码输入框　　radio单选框　　checkbox多选框　　submit提交按钮　　button按钮(需要配合js使用.)button和submit的区别？　... 查看详情

软件测试体系学习及构建-html之布局表单框架颜色(代码片段)

（9）-HTML之布局、表单、框架、颜色、颜色名、颜色值1html布局1.1使用div块元素1.1.1举例1.2使用表格1.2.1举例2表单2.1表单说明2.2表单标签2.3输入元素-文本域2.4输入元素-密码字段2.5输入元素-单选按钮2.6输入元素-复选框2.7输... 查看详情

css总结18：html表单和输入

1HTML 表单和输入1.1HTML表单介绍表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。表单使用表单标签<form>来设置:例子:... 查看详情

html基础表格和表单

本次博客的主要内容如下：meta和link表格表单meta和linkmetameta的属性有两种：name和http-equiv。name属性主要用于描述网页内容，对应与网页内容。1.关键字，当搜索引擎在爬取内容的时候，会根据关键字判断：<head><title></t... 查看详情

django框架之form表单(代码片段)

...jangoForm流程一、Form介绍我们之前在HTML页面中利用form表单向后端提交数据时，都会写一些获取用户输入的标签并且用form标签把它们包起来。与此同时我们在好多场景下都需要对用户的输入做校验，比如校验用户是否输入，... 查看详情

使用 jquery 在选项选择的基础上添加新的表单输入字段

】使用jquery在选项选择的基础上添加新的表单输入字段【英文标题】：Addnewforminputfieldsonoptionselectbasisusingjquery【发布时间】：2012-08-2122:38:50【问题描述】：我有一个html表单，在从下拉列表中选择输入字段时，我想添加一些html输... 查看详情

html5实战文摘第二章html5用于创建表单的输入小部件数据绑定以及数据验证

　　HTML5表单在原有表单特性的基础上增加了一些比较便捷的特性，使得我们实现一些常用的表单的小部件、输入类型、输入验证不再那么大费周章。上一篇文章提到了HTML5实现的几种新的输入类型，现在我们更加详尽的了解HTML5... 查看详情

javascript的基础

JavaScript表单验证JavaScript可用来在数据被送往服务器钱对HTML表单中的这些输入数据进行验证。表单数据经常需要使用JavaScript来验证其正确性：·验证表单数据是否为空？·验证输入是否是一个正确的email地址？·验证日期是否输入... 查看详情

html表单和输入

定义文本域<html><body><form>姓：<inputtype="text"name="firstname"><br/>名：<inputtype="text"name="lastname"></form></body></html>定义密码域<html><body& 查看详情

bootsrtap表单

...rap框架中的核心内容，本文将详细介绍Bootstrap的表单基础表单　　对于基础表单，Boots 查看详情

正文

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

HTML 表单和输入

实例

表单

输入

文本域（Text Fields）

单选按钮（Radio Buttons）

复选框（Checkboxes）

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

更多实例

表单实例

HTML 框架

实例

框架

框架标签（Frame）

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

更多实例

添加 iframe 的语法

Iframe - 设置高度和宽度

实例

Iframe - 删除边框

实例

使用 iframe 作为链接的目标

实例

HTML 4.01 快速参考

HTML Basic Document

Text Elements

Logical Styles

Physical Styles

Links, Anchors, and Image Elements

Unordered list

Ordered list

Definition list

Tables

Frames

Forms

Entities

Other Elements

html基础表单(代码片段)

html5表单元素基础

01html基础03

前端html基础知识表单

html基础-3（框架表单与表格等）

html基础复习表单

web开发——html基础（html表单）

html表单和输入

web前端html基础2

软件测试体系学习及构建-html之布局表单框架颜色(代码片段)

css总结18：html表单和输入

html基础表格和表单

django框架之form表单(代码片段)

使用 jquery 在选项选择的基础上添加新的表单输入字段

html5实战文摘第二章html5用于创建表单的输入小部件数据绑定以及数据验证

javascript的基础

html表单和输入

bootsrtap表单