[HTML5]HTML表单(Forms)

表单是HTML最主要的用户输入元素

用户和网页的交互动作有鼠标悬停、点击链接（或移动触摸）和页面滚动等，这些交互方式一般只是服务器单向信息输出。

有时候用户需要输入一些信息给服务器来完成双向交互，这类交互包括：

  • 注册/登录
  • 用户信息填写
  • 搜索/过滤
  • 上传文件
  • 文章编辑

表单及其控件就是HTML用来支持上述交互的主要元素：

  • 文本输入（单行或多行）
  • 单选框
  • 多选框
  • 下拉列表
  • 文件上传控件
  • 表单提交按钮

这些控件使用不同的HTML 标签，但大部分使用 <input> 标签，而使用 type 属性来区别输入控件的类型：

<!-- 文本输入 -->
<input type="text">
<!-- 复选框 -->
<input type="checkbox">
<!-- 单选框 -->
<input type="radio">

表单元素（form）

<form> 是块级元素，用来定义网页中的交互输入部分。所有的表单控件必须包含在 <form> 元素中。

表单元素有两个必须的属性：

  • action 用来定义信息提交的目标（即表单提交到哪里去）
  • method 用来定义信息提交的方式（即表单怎么提交），可以是 GET 或 POST 其中之一。

通常表单信息被提交给 action 所指定的服务器程序，服务器（即后端程序如PHP/Java）会对表单信息做出处理并给出应答。

表单用来把一组表单控件集中起来完成一个特定的交互操作，比如登录表单，通常包含3个控件：

  • 电子邮箱 <input type="email">
  • 用户密码 <input type="password">
  • 提交按钮 <input type="submit">

这些控件被包含在一个 <form action="/login" method="POST"> 元素中。

文本输入框

为了支持用户输入姓名，电子邮件，密码，地址等信息，HTML表单中的文本输入框控件包含多种类型：

普通文本 <input type="text"> 可以输入任意字符
电子邮件 <input type="email"> 如果输入的是非法电子邮件，会出现告警提示
密码 <input type="password"> 显示为小黑点，隐藏用户输入
数字 <input type="number"> 只能输入数字，且可以使用上下键来快速改变数值
电话 <input type="tel"> 可以触发自动填充
多行文本 <textarea></textarea>  (注：复制原因显示效果不完善,请自行测试,或查看底部原网址) 可以调整文本输入框的大小

尽管这些输入框看起来很相似，且数据类型的默认校验也不那么有效，似乎有点冗余，但从语义上来看，type 赋予了输入框更具体的含义，这会有助于浏览器在实现这些控件接口时更好的提升用户交互体验。

占位符（Placeholders）

为了更好的提示用户输入，文本输入框可以显示占位符文本而不是空白，占位符在用户开始输入时会自动消失，不会形成干扰。

<input type="text" placeholder="请输入昵称">

(注：复制原因显示效果不完善,请自行测试,或查看底部原网址)

试一下，当你开始输入时，“请输入昵称” 会消失。

标签（Labels）

由于表单控件本身不具备很好的自描述性，通常会在控件前面添加配对的文本标签（label），对控件作用做出提示。

<label>Email</label>
<input type="email">

Email

对于纯文本输入框而言标签（label）和占位符（placeholder）功能类似，不过标签会一直显示，且可以用于保持和其它表单元素对齐，比如选择框。

尽管我们可以使用简短的文本来描述表单控件，使用 <label> 在语义上要更符合规范，它们只用于表单内，还可以通过 for 属性来和拥有特定 id 的输入控件配对使用。

<label for="first_name">名字</label>
<input id="first_name" type="text">

名字

点击标签文本，输入焦点会移动到文本输入框内。这对于单选和复选框的操作尤为方便。

复选框（Checkboxes）

复选框 是选择型控件，拥有两个状态：选中（checked）和未选中（unchecked）。一般用来接受用户回答“是”或“否”。

<input type="checkbox"> 同意用户协议

同意用户协议

由于选择框很小，点击选中不方便，因此，比较好的实践是在该元素外面包裹一个 <label> ：

<label>
  <input type="checkbox"> 同意用户协议
</label>

同意用户协议

除了上面的方法，也可以使用label的 <for> 属性来和input配对：

<input id="terms" type="checkbox">
<label for="terms">同意用户协议</label>

同意用户协议

这样你就可以通过点击 “同意用户协议” 来切换复选框的选择状态。

默认情况下，复选框是未选中状态，你可以简单的通过设置 checked 属性来改变状态。

<label>
  <input type="checkbox" checked> 同意用户协议
</label>

同意用户协议

复选框还有一个重要的用途是可以让用户在一组可选项中进行多项选择。

首先我们需要组合（group）一些复选框，为此我们为它们设置相同的 name 属性：


<label>兴趣</label>
<input id="game" type="checkbox" name="interests">
<label for="game">电竞</label>
<input id="coding" type="checkbox" name="interests">
<label for="coding">编码</label>
<input id="rock" type="checkbox" name="interests">
<label for="rock">摇滚</label>

兴趣
 电竞  编码  摇滚

单选框（Radioboxes）

单选框用来给用户在一组可选项中做单项选择。

同上，我们通过为单选框设置相同的 name 属性来把它们编组：

<label>婚姻状态</label>
<label>
  <input type="radio" name="status">
  单身
</label>
<label>
  <input type="radio" name="status">
  已婚
</label>
<label>
  <input type="radio" name="status">
  离异
</label>

婚姻状态
 单身  已婚  离异

由于我们把这组单选框的 name 属性都设置成了相同的 "status"，选择其中一项，将导致其它选项被重置为未选中状态。这就是单选框的互斥（mutually exclusive）特性。

单选框和复选框的差异

复选框可以只有一个，用于提示用户回答是或否。而单个的单选框却没有意义，必须是一组可选项（至少2个），用于多选1。

此外，你可以不点击任何的复选框，但是你必须点击来选择一个单选框，且你无法通过再次点击同一个单选框来让它处于未选中状态，你只有通过选择一组单选框中的其他兄弟选项来重置之前的状态。

下拉菜单（Dropdown menus）

对于少量的选项，单选框和复选框已经可以满足要求，但是如果选项很多时，从界面布局以及可扩展性的角度而言，选择框是受到空间限制的。 而且对于大量的选项，我们还需要提供选项过滤功能以便快速定位选项，因此在这种情况下，我们需要使用新的表单界面组件： <select> 下拉列表框。 该控件通过滚动条和接受键盘输入事件的界面设计无限扩展了选项可用空间。

下拉列表框同时支持单项或多项选择，下面是月份选择的下拉列表框控件：

<select>
  <option>January</option>
  <option>February</option>
  <option>March</option>
  <option>April</option>
  <option>May</option>
  <option>June</option>
  <option>July</option>
  <option>August</option>
  <option>September</option>
  <option>October</option>
  <option>November</option>
  <option>December</option>
</select>

January
February
March
April
May
June
July
August
September
October
November
December

你可以试着输入字母S，将很快定位到September选项，类似的，如果连续输入May字符串，将直接定位到May选项。这大大加快了选项检索过程。

上面的列表你只能选择一个选项，要想选择多个选项，可以通过设置 multiple 属性：

<label>浏览器兼容性：</label>
<select multiple>
  <option>Google Chrome</option>
  <option>Internet Explorer</option>
  <option>Mozilla Firefox</option>
  <option>Opera</option>
  <option>Safari</option>
</select>

浏览器兼容性

Google Chrome
Internet Explorer
Mozilla Firefox
Opera
Safari

按住Ctrl（或?）键，然后点击多个选项。重复点击即取消之前的选项。

我们还可以使用<optgroup>给下拉列表框中的选项进行分组，这样就能形成类似树形的分级选择控件。

下面给出一个完整包含上述各个元素的表单实例：

<form action="#" method="post">
    <h1>Sign Up</h1>
    <fieldset>
        <legend><span class="number">1</span> Your basic info</legend>
        <label for="name">Name:</label>
        <input type="text" id="name" name="user_name">

        <label for="mail">Email:</label>
        <input type="email" id="mail" name="user_email">

        <label for="password">Password:</label>
        <input type="password" id="password" name="user_password">

        <label>Age:</label>
        <input type="radio" id="under_13" value="under_13" name="user_age">
        <label for="under_13" class="light">Under 13</label>

        <input type="radio" id="over_13" value="over_13" name="user_age">
        <label for="over_13" class="light">Over 13</label>
    </fieldset>

    <fieldset>
        <legend><span class="number">2</span> Your profile</legend>

        <label for="bio">Biography:</label>
        <input id="bio" name="user_bio"></input>

        <label for="job">Job role:</label>
        <select id="job" name="user_job">

            <optgroup label="Web">
                <option value="frontend_developer">Front-End Developer</option>
                <option value="php_developer">PHP Developer</option>
                <option value="python_developer">Python Developer</option>
                <option value="rails_developer">Rails Developer</option>
                <option value="web_designer">Web Designer</option>
                <option value="wordpress developer">Wordpress Developer</option>
            </optgroup>

            <optgroup label="Mobile">
                <option value="android_developer">Android Developer</option>
                <option value="ios_developer">iOS Developer</option>
                <option value="mobile_designer">Mobile Designer</option>
            </optgroup>

            <optgroup label="Business">
                <option value="business_owner">Business Owner</option>
                <option value="freelancer">Freelancer</option>
            </optgroup>
        </select>

        <label>Interests:</label>
        <br>
        <input type="checkbox" id="development" value="interest_development" name="user_interest">
        <label for="development">Development</label>
        <br>

        <input type="checkbox" id="design" value="interest_design" name="user_interest">
        <label for="design">Design</label>
        <br>

        <input type="checkbox" id="business" value="business" name="user_interest">
        <label for="business">Business</label>

    </fieldset>
    <button type="submit">Sign Up</button>
</form>
*,
*:before,
*:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
:root {
    background-color: #2e4049;
    color: white;
}
form {
    width: 40%;
    max-width: 350px;
    margin: 0 auto 30px;
}
fieldset {
    background: #202d33;
    border-radius: 4px;
    border: none;
    border-top: 2px solid tomato;
    margin-bottom: 30px;
    box-shadow: 0 5px 30px rgba(0, 0, 0, .3);
    padding: 10px 15px;
}
legend {
    font-weight: bold;
    margin-bottom: 10px;
    padding-right: 10px;
}
.number {
    background: tomato;
    margin-right: 10px;
    padding: 10px 4px 4px;
}
h1 {
    margin: 60px 0;
    text-align: center;
    font-size: 3em;
    color: tomato;
    text-shadow: 0 1px 0 #ea553a, 0 3px 0 #b72b12, 0 7px 0 #420900, 0 5px 10px #0b3f3b, 0 5px 11px #ff546a, 0 0 20px tomato;
}
input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
textarea,
select {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    font-size: 16px;
    height: auto;
    margin: 0;
    outline: 0;
    padding: 10px;
    width: 100%;
    background-color: #e8eeef;
    color: #2e4049;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
    margin-bottom: 20px;
}
input[type="checkbox"] {
    margin: 0 4px 8px 0;
}
input[type="radio"] {
    margin: 0 2px 0 15px;
}
label {
    display: inline-block;
    margin-bottom: 10px;
}
button {
    display: block;
    width: 30%;
    margin: 50px auto 0;
    padding: 10px 20px;
    background-color: tomato;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
    box-shadow: 0 2px 0 #ea553a, 0 4px 0 #b72b12, 0 6px 0 #420900, 0 6px 10px #0b3f3b, 0 6px 11px #ff546a, 0 0 20px tomato;
}
button:hover {
    text-shadow: 0 3px 2px rgba(0, 0, 0, .5);
}
button:active {
    box-shadow: 0 0px 0 #ea553a, 0 1px 0 #b72b12, 0 2px 0 #420900, 0 2px 10px #0b3f3b, 0 2px 11px #ff546a, 0 0 20px tomato;
    outline: 0;
}
button:focus {
    outline: 0;
}
@media (max-width: 840px) {
    form {
        width: 70%;
    }
}
@media (max-width: 490px) {
    form {
        width: 100%;
    }
    button {
        width: 50%;
    }
}

为了布局的美观，使用了CSS样式，也就是接下来我们要讲解的课程内容(http://techbrood.com/h5b2a?p=css-basics)。

本文参考自：http://techbrood.com/h5b2a?p=html-forms

时间： 2024-10-07 20:13:05

[HTML5]HTML表单(Forms)的相关文章

HTML5 智能表单

1.表单新增属性  ? autofocus 属性 <input type="text" autofocus/>设置 autofocus 属性,使文本框自动获得焦点 注意:一个页面中最多只能有一个表单元素设置该属性,否则功能将失效,建议对第一个input元素设置autofocus属性. ? formaction 属性 <input type="submit" formaction="处理逻辑"><!-- 处理逻辑可为a

HTML5的表单新特性(2)

HTML5 表单新特性:等待了12年之久,我们迎来了HTML5主要修订版本.虽然此版本仍处于测试阶段并且没有宣布正式推出的日期,HTML5的网页设计师和程序员已经就开始关注,并对最新功能展开了热烈讨论. HTML5新特性的目的是改善嵌入,比如视频和音频等多媒体的支持,为开发者和终端用户供简单的编程和更好的用户体验.现在互联网世界都在等待,浏览器更新时能支持HTML5的新版本.HTML5已经被很多浏览器支持,比如Safari, Chrome, FireFox, Opera, IE9,它是向后兼容的

HTML5的表单新特性(3)

虽然目前各种浏览器对HTML5的支持程度参差不齐,但是不可否认HTML5将会成为未来的流行趋势. 一.HTML5表单新增属性 (1)placeholder 这个属性的用处是颇大的,可以向用户显示描述性说明或者提示信息.如果浏览器不支持的话,此属性 会忽略掉,显示浏览器默认的状态.当输入框中有值或者获得焦点的时候,不显示placeholder的值 eg:  您的名字: <input type="text" placeholder="请输入您的真实姓名" name

Laravel教程 六：表单 Forms

Laravel教程 六:表单 Forms 此文章为原创文章,未经同意,禁止转载. Form laravel 5.2 之后请使用 laravelcollective/html 替换 illuminate/html. 出现问题先看评论. 在开始之前,我们把界面先美化一点点先: 首先到https://github.com/JellyBool/blog-css-js得到静态文件,然后分别修改下面三个文件: 1. app.blade.php 2. articles/index.blade.php 3. a

精美的HTML5/CSS3表单 带小图标

今天我们要来分享一款非常精美的HTML5/CSS3表单,准备地说,这是一款经过美化的input输入表单,每一个输入表单都可以定义其两侧的小图标,非常华丽.另外,这款表单应用还采用了3种不同的风格主题,你可以在演示页的菜单栏中选择一种样式.需要高版本的浏览器才能支持. 你也可以在这里在线演示 下面我们来简单分析一下这款表单的源代码,源代码由HTML代码.CSS代码及Javascript代码组成.一共3组样式,我们只对其中一组作解说. HTML代码: <ul data-for="prefix&

关于创建Django表单Forms继承BaseForm的问题

在创建Django表单时,因为需要验证用户输入的验证码是否正确,因此需要在session里提取当前验证码的值和POST提交过来的值进行比对,如图: 1 form.py 2 3 from django import forms 4 5 class LoginForms(forms.Form): 6 check_code = forms.CharField() 7 def clean_check_code(self): 8 if self.request.session.get('CheckCode

5.9 HTML5 新增表单控件 ---不是特别重要

HTML5 新增表单控件新增类型:网址 邮箱 日期 时间 星期 数量 范围 电话 颜色 搜索这些控件基本不使用:因为在不同的浏览器中效果不一样.产品设计中不允许多个浏览器效果不同,必须统一. <label>网址:</label><input type="url" name="" required><br><br> <label>邮箱:</label><input type=&q

HTML5的表单新特性

HTML5 Web Forms 2.0是对目前Web表单的全面提升,它在保持了简便易用的特性的同时,增加了许多内置的控件或者控件属性来满足用户的需求,并且同时减少了开发人员的编程.在我看来,HTML5 主要在以下几个方面对目前的Web表单做了改进: 新的控件类型 还在为类型检查犯愁吗,还在为那一长串看不太明白的检验输入的正则表达式而苦恼吗,HTML5提供的一系列新的控件将天然的具备类型检查的功能.比如说URL输入框,Email输入框等. <input type="url">

【HTML5】表单属性

* autocomplete autocomplete 属性规定 form 或 input 域应该拥有自动完成功能. 注释:autocomplete 适用于 <form> 标签,以及以下类型的 <input> 标签:text, search, url, telephone, email, password, datepickers, range 以及 color. 当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项: <!DOCTYPE HTML> <