HTML表单与输入实例

解释
HTML 表单用于搜集不同类型的用户输入。
HTML 表单包含表单元素。
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
<input> 元素
<input> 元素是最重要的表单元素。

<input> 元素有很多形态，根据不同的 type 属性。

这是本章中使用的类型：

类型 描述
text   定义常规文本输入。
radio  定义单选按钮输入（选择多个选择之一）
submit 定义提交按钮（提交表单）
注释：您稍后将在本教程学到更多有关输入类型的知识。
###########

下面是 <form> 属性的列表：

属性 描述
accept-charset 规定在被提交表单中使用的字符集（默认：页面字符集）。
action 规定向何处提交表单的地址（URL）（提交页面）。
autocomplete   规定浏览器应该自动完成表单（默认：开启）。
enctype    规定被提交数据的编码（默认：url-encoded）。
method 规定在提交表单时所用的 HTTP 方法（默认：GET）。
name   规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate 规定浏览器不验证表单。
target 规定 action 属性中地址的目标（默认：_self）。
注释：您将在下面的章节学到更多关于属性的知识。

提示和注释：
注释：<option> 标签可以在不带有任何属性的情况下使用，但是您通常需要使用 value 属性，此属性会指示出被送往服务器的内容。

注释：请与 select 元素配合使用此标签，否则这个标签是没有意义的。

提示：如果列表选项很多，可以使用 <optgroup> 标签对相关选项进行组合。

可选的属性
属性 值  描述
disabled   disabled   规定此选项应在首次加载时被禁用。
label  text   定义当使用 <optgroup> 时所使用的标注。
selected   selected   规定选项（在首次显示在列表中时）表现为选中状态。
value  text   定义送往服务器的选项值。

48.文本域(Text fields)
本例演示如何在 HTML 页面创建文本域。用户可以在文本域中写入文本。
<form>
    名：
    <input type="text" name="firstname">
    <br />
    姓：
    <input type="text" name="lastname">
</form>

49.密码域
本例演示如何创建 HTML 的密码域。
<form>
    用户：
    <input type="text" name="user">
    密码：
    <input type="password" name="password">
</form>

<p>
    请注意，当您在密码域中键入字符时，游览器将使用项目符号来代替这些字符。
</p>

49.复选框
本例演示如何在 HTML 页中创建复选框。用户可以选中或取消选取复选框。
<form>
    我喜欢自行车：
    <input type="checkbox" name="Bike">
    <br />
    我喜欢汽车：
    <input type="checkbox" name="Car">
</form>

50.单选按钮
本例演示如何在 HTML 中创建单选按钮。
<form>
    男性：
    <input type="radio" checked="checked" name="Sex" value="male"/>
    女性：
    <input type="radio" name="Sex" value="female" />
</form>
<p>当用户点击一个单选按钮时，该按钮会变为选中状态，其他所有按钮会变为非选中状态。</p>

51.简单的下拉列表
本例演示如何在 HTML 页面中创建简单的下拉列表框。下拉列表框是一个可选列表。
<form>
    <select name="cars">
        <option value="volvo"> Volvo</option>
        <option value="Saab">Saab</option>
        <option value="fiat">Fiat</option>
        <option value="audi">Audi</option>
    </select>
</form>

52.另一个下拉列表
本例演示如何创建一个简单的带有预选值的下拉列表。（译者注：预选值指预先指定的首选项。）
<form>
    <select name="cars">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="fiat" selected="selected">fiat</option>
        <option value="audi">Audi</option>
    </select>
</form>

53.文本域(Textarea)
本例演示如何创建一个文本域（多行文本输入控件）。用户可以在文本域中写入文本。在文本域中，可写入的字符字数不受限制。
<textarea cols="30" rows="5">
    领先得web 技术
</textarea>
<p>您无法对本实例进行编辑，因为我们的在线编辑器使用textarea 进行输入，而游览器不允许texatearea 中存在
另一个 textarea。
</p>

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

<form>
    <input type="button" value="Hello world!">
</form>

55.Fieldset around data
本例演示如何在数据周围绘制一个带标题的框。
##
定义和用法
fieldset 元素可将表单内的相关元素分组。

<fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。

当一组表单元素放到 <fieldset> 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。

<fieldset> 标签没有必需的或唯一的属性。

<legend> 标签为 fieldset 元素定义标题。

disabled   disabled   规定应该禁用 fieldset。
form   form_id    规定 fieldset 所属的一个或多个表单。
name   value  规定 fieldset 的名称。

实例1
<form>
    <fieldset>
        <legend>健康信息</legend>
        身高：<input type="text" />
        体重：<input type="text" />

    </fieldset>
</form>
<p>如果表单周围没有边框，说明您的游览器太老了。</p>

56.带有输入框和确认按钮的表单
本例演示如何向页面添加表单。此表单包含两个输入框和一个确认按钮。
<form action="test1.html">
    First name:<br>
    <input type="text" name="firstname" value="Mickey">
    <br>
    Last name:<br>
    <input type="text" name="lastname" value="Monuse">
    <br><br>
    <input type="submit" value="Submit">
</form>
<p>如果您点击提交，表单数据会被发送到名为 test1.html 的页面。</p>

57.带有复选框的表单
此表单包含两个复选框和一个确认按钮。

<form name="input" action="test1.html" method="get">
    I have a bike:
    <input type="checkbox" name="vehicle" value="Bike" checked="checked" />
    <br />
    I hava a car:
    <input type="checkbox" name="vehicle" value="Car" />
    <br />
    I hava an airplane:
    <input type="checkbox" name="vehicle" value="Airplane" />
    <br />
    <input type="submit" value="Submit">

</form>

58.带有单选按钮的表单
此表单包含两个单选框和一个确认按钮。
<br> 可插入一个简单的换行符。

<br> 标签是空标签（意味着它没有结束标签，因此这是错误的：<br></br>）。在 XHTML 中，把结束标签放在开始标签中，也就是 <br />。

请注意，<br> 标签只是简单地开始新的一行，而当浏览器遇到 <p> 标签时，通常会在相邻的段落之间插入一些垂直的间距。

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

59.从表单发送电子邮件
此例演示如何从表单发送电子邮件。
<form action="./test1.html" method="post" enctype="text/plain">
<h3>这个表单会把电子邮件发送到W3school</h3>
    姓名：<br />
    <input type="text" name="name" value="邹立翔" size="20">
    <br />
    电邮：<br />
    <input type="text" name="mail" value="yourmail" size="20">
    <br />
    内容：<br />
    <input type="text" name="comment" value="yourcomment" size="40">
    <br /><br />
    <input type="submit" value="发送">
    <input type="reset" value="重置">
</form>
巴特西

HTML表单与输入实例

最新文章

热门文章
