• 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>
  • 相关阅读:
    深入Android 【一】 —— 序及开篇
    Android中ContentProvider和ContentResolver使用入门
    深入Android 【六】 —— 界面构造
    The service cannot be activated because it does not support ASP.NET compatibility. ASP.NET compatibility is enabled for this application. Turn off ASP.NET compatibility mode in the web.config or add the AspNetCompatibilityRequirements attribute to the ser
    Dynamic Business代码片段总结
    对文件的BuildAction以content,resource两种方式的读取
    paraview 3.12.0 windows下编译成功 小记
    百度网盘PanDownload使用Aria2满速下载
    netdata的安装与使用
    用PS给证件照排版教程
  • 原文地址:https://www.cnblogs.com/zoulixiang/p/9956616.html
Copyright © 2020-2023  润新知