HTML表单及其Input输入类型

TML 表单用于搜集不同类型的用户输入。HTML5 Input，拥有多个新的表单输入类型，提供了更好的输入控制和验证，今天将为大家带来HTML中的表单及其input输入类型。

一、HTML表单

1、HTML表单用于收集不同类型的用户输入，是一个包含表单元素的区域并且允许用户在表单中输入内容，比如文本域（textarea）、下拉列表、单选框（radio=buttons）、复选框（checkboxes）等。

2、表单使用标签<form>来设置，示例：

运行结果：

二、HTML表单属性：

1、HTML表单包含表单元素，表单元素是指不同类型的input元素、复选框、单选按钮、提交按钮等。

2、action属性

在上面的示例中出现了action属性，action属性定义在提交表单执行的动作，向服务器提交表单的通常做法是使用提交按钮。

通常，表单会被提交到web服务器上的网页，上面的例子中，则指定了某个服务器脚本来处理被提交表单。

如果省略 action 属性，则 action 会被设置为当前页面。

3、method 属性

method属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）：

如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息，使用get。

如果表单正在更新数据，或者包含敏感信息（例如密码），使用post。

4、如果要正确地被提交，每个输入字段必须设置一个 name 属性，示例：

<!DOCTYPE html>

<html>

<body>

First name:<br>

<br>

Last name:<br>

</form>

<p>如果您点击提交，表单数据会被发送到名为 demo_form.asp 的页面。</p>

<p>first name 不会被提交，因为此 input 元素没有 name 属性。</p>

</body>

</html>

运行结果：

5、target 属性

target 属性规定提交表单后在何处显示响应，target 属性可设置以下值之一：

默认值为 _self，这意味着响应将在当前窗口中打开。

6、Autocomplete 属性

autocomplete 属性规定表单是否应打开自动完成功能。

启用自动完成功能后，浏览器会根据用户之前输入的值自动填写值，示例：

运行结果：

7、所有<form>属性的列表：

三、HTML表单元素：

1、<input>元素是最重要的表单元素，有很多的形态，根据不同的type属性，例如：

①　文本输入（text），示例：

<!DOCTYPE html>

<html>

<body>

<form>

First name:<br>

<br>

Last name:<br>

</form>

<p>请注意表单本身是不可见的。</p>

<p>同时请注意文本字段的默认宽度是 20 个字符。</p>

</body>

</html>

运行结果：

②　单选按钮输入（radio），示例：

<!DOCTYPE html>

<html>

<body>

<form>

<input type="radio" name="sex" value="male" checked>Male

<br>

<input type="radio" name="sex" value="female">Female

</form>

</body>

</html>

运行结果：

③　提交按钮（submit），示例：

<!DOCTYPE html>

<html>

<body>

First name:<br>

<br>

Last name:<br>

</form>

<p>如果您点击提交，表单数据会被发送到名为 demo_form.asp 的页面。</p>

</body>

</html>

运行结果：

2、<select>元素

<select>元素定义下拉列表，示例：

<!DOCTYPE html>

<html>

<body>

<option value="volvo">Volvo</option>

</select>

</form>

</body>

</html>

运行结果：

3、<fieldset>元素

<fieldset>元素组合表单中的相关数据

<legend>元素为<fieldset>元素定义标题，示例：

<!DOCTYPE html>

<html>

<body>

<legend>Personal information:</legend>

First name:<br>

<br>

Last name:<br>

</fieldset>

</form>

</body>

</html>

运行结果：

4、<textarea> 元素

<textarea> 元素定义多行输入字段（文本域）、示例：

<!DOCTYPE html>

<html>

<body>

<form>

The cat was playing in the garden.

</textarea>

</form>

</body>

</html>

运行结果：

5、HTML5<datalist>元素

<datalist> 元素为 <input> 元素规定预定义选项列表。

用户会在他们输入数据时看到预定义选项的下拉列表。

<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性，示例：

<!DOCTYPE html>

<html>

<body>

</datalist>

</form>

</body>

</html>

运行结果：

四、HTML表单输入类型

输入类型	定义
text	定义供文本输入的单行输入字段
password	定义密码字段
submit	定义提交表单数据至表单处理程序的按钮
radio	定义单选按钮
checkbox	定义复选框

<input>中的type：

类型	定义
radio	定义单选按钮
checkbox	定义复选框
button	定义按钮
number	用于应该包含数字值的输入字段
date	用于应该包含日期的输入字段
color	用于应该包含颜色的输入字段
range	用于应该包含一定范围内的值的输入字段
month	允许用户选择月份和年份
week	允许用户选择周和年
time	允许用户选择时间（无时区）
datetime	允许用户选择日期和时间（有时区）
datetime-local	允许用户选择日期和时间（无时区）
email	用于应该包含电子邮件地址的输入字段
search	用于搜索字段（搜索字段的表现类似常规文本字段）
tel	用于应该包含电话号码的输入字段
url	用于应该包含 URL 地址的输入字段

输入限制：

这就是有关HTML表单的大概内容了，希望这篇HTML的表单及其input输入类型的知识点能对大家有所帮助。

站开发入门指南：表单相关标签们。

接下来我们来学习一下表单以及相关的元素。

·表单其实英文是叫做fo.rm，在我们平时使用的这种互联网产品中包括网站也好、app也好，经常会看到这种需要你去填一些资料、填一些文字、填一些数据的这样一种页面。像这种页面其实都是通过表单以及表单的元素去构成、去实现的。

也就是说表单其实是用来收集用户数据的，它是给用户去输入一些数据的。而且输入完之后，一般它是要跟服务器去发生一些交互的。就是比如说把数据发送到服务器或者在本地处理过后，再给到服务器去进一步的处理或者去保存。所以其实表单这些元素，如果真正要去用起来的话，真正要让它功能跑起来的话，其实很多时候是要跟js打交道的。所以目前来说只要简单的去了解一下表单的元素的基本使用就可以了。

·然后后面学了CSS之后，你也知道怎么去给这些表单做它的样式就OK了。那我们看一下表单以及相关的元素有哪些？表单主要是有一个这样一个表单本身的标签，另外这些就是跟它相关的一些标签元素了。这些元素一般都是放在这个for.m元素里面的嵌套在它里面的。

但是表单的元素，它跟我们之前学过的ul li-olli一定要进行嵌套使用的，这种元素还不太一样。表单中的元素，像这个和这个是经常可以单独使用的，也就是说不用嵌套在这个form表单里面也是可以用的。所以要明白这些表单内的元素，如果你有需要是完全可以去独立的去使用它的，并不一定要跟这个for.m.搭.配起来嵌套在它里面的。

·很多时候去使用form这样的标签。然后把这些表单的元素嵌套在里面。它其实主要的一个目的，它是为了让这些就是收集到的数据组成一种结构化的一种模式，结构化的一种状态。这样发送到服务器，服务器也可以通过这种更好的结构去读取数据。

所以目前的学习阶段来讲是没有办法给你去展示表单的作用。但是等你学到JS之后，你在有了这些基础知识之后，就能通过JS其实非常清晰看到它的整个数据结构。这节课主要是来讲一讲这个标签，这个标签其实会经常单独的来进行使用。这个标签之前也简单的给大家去演示过，它是一个用来做这种文字输入的标签。

很多时候，像这种真实的产品页面，产品里面会发现很多的输入栏都是用这个标签去实现。打开开发者工具之后，可以看到这里有一个这样的小工具，选用它之后就可以去快速的定位到元素。可以看到它这边有个input，选中之后，元素列表这里也能看到就是input这样的元素。所以很多的页面上的输入框其实都是用input元素来实现的。

input非常重要的属性叫做type，type属性之前演示过一个叫text(的值)，一个叫Checkbox，给大家演示过。这两个设置之后是会产生不同的效果。这种能设置的属性的值非常多，我这里不给大家去做演示，你有兴趣自己可以去尝试去使用一下。

这里主要是介绍一个是这个之前讲过的，给大家简单也再看一下。一个是checkbox，一个是checkbox，还有一个file，其他的。

还有pasisword也给大家看一下。这里来看一下。首先看到input非常简单，直接默认的text它这边，这边先把它放大一点，放五倍大，大家看起来清楚一点。这样就可以在这里输入这样一个内容了，非常简单。

然后比如这里改成password，然后这边输入的东西自动的就变成这种小圆点了，就相当于是一种帮你保密，就是防止别人偷看到你的密码。然后就是checkbox(多选框)。之前简简单演示过了checkbox会变成这种勾选的框，它有一个属性，如果你使用的checkbooks这样的类型，你可以使用这个checked这样的属性，就让元素默认是打勾(选中)的状态。

像这种东西其他的前面一般都会有一个文字，告诉你这个选项是什么，然后这里把这个改一下，就叫做选择。想学习的语言其实一定是可以多选的。这里来一个写一个span，叫做js好html，然后自己再多复制几个，然后这里变成CSS，变成javascript。像这种前面这种文字用span都是没有任何问题的。

但是其实在表单元素里面有一个标签叫做lab.el。label其实一般用来写这种，就是告诉这个选项是什么样的一个选项，这样的一些文字。label有个特殊的作用，比如说把这个换成label，label之后这里有一个属性叫做for，for可以去跟比如说input，这里设计一个id叫做html。

稍微跟写的不一样，这个其实写一样也没有关系，但是这里写不一样，大家可能更容易理解一点。

把名字id名跟这个对应上之后for里面是某个元素的id值，就是input这样的一个元素的id值，label就跟input元素绑定了。注意这里写错了label。

·然后看一下可以点击文字，就相当于点击了选项框，其他的用spam包裹的文字是没有绑定的效果。所以label标签的作用就是有这样的一个文字跟相应的元素绑定起来。点击文字相当于就点击元素这样的效果。

·然后可以看一下另外一种叫radio这种单选框的元素，也是用input来实现的。然后来看一下input，把它设置成radio的类型就会变成这样一个圆点。假如还是按照这种模式，比如说这里把ID也设置一下叫做htmltag，其实跟htmltag类型的数据库也是一样的。如果设置checked就默认的，就相当于是选中的状态。

·如果这里还有单选，这里还有一个，如果叫CSS，把这个先取消掉。这里其实是有两个选项，两个可选项，整个的结果是希望是呈现单选的状态，选中其中另外一个，肯定要呈现一种未选中的状态。

·现在两个都可以同时选中，这样肯定是不行的。所以这里可以用属性，叫做name，就叫section。下面同时也取名字，也是name同样的值。

这里可以把它理解成用了同一个名字的单选框，他们最终只能选中其中一个。可以试一下，比如说点CSS，点html，这个东西是单选框里面非常重要的知识点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    /*总体的样式*/
    <style>
    	/*盒子样式*/
        #box{
            width: 350px; //宽
            height: 450px; //高
            border: 1px solid black; //边框
            border-radius: 10px; //边框弧度
            font-family: 黑体; //字体
            letter-spacing:8px; //段间距
            word-spacing: 10px; //字间距
            line-height: 40px; //行高
            font-size: 18px; //字大小
            padding: 20px; //内边框
        }
        /*给'注册'赋予样式*/
        .register{
            width:280px ; //宽
            height: 50px; //高
            background-color: skyblue; //背景颜色
            border-radius: 10px; //边框弧度

        }
        /*将所有边框都改变*/
        *{
            border-radius: 5px; 边框弧度
        }
        /*使用class选择器，赋予number宽高和边框*/
        .number{
            width: 185px; //宽
            height: 27px; //高
            border-width: 1px; //边框宽度

        }
        /*id选择器*/
        #two{
            width: 55px; //宽
            border-width: 1px; 边框宽度
        }
        /*id选择器*/
        #phone{
            width: 103px; //宽
        }
        /*class 选择器*/
        .boxs{
            zoom: 75%; //清除浮动
            color: darkgray; //颜色
        }
        /*class选择器*/
        .box_a{
            width: 50px; //宽
            height: 50px; //高
            background-image: url("../image/04.jpg "); //背景图片
            background-repeat: no-repeat; // 是否平铺
            background-size: 50px 25px; //背景尺寸
            position: relative; //定位 相对定位
            left: 310px; //定位后左移
            bottom: 32px; //定位后下移

        }
    </style>
</head>
<body>
<div id="box">
    <h1>请注册</h1>
<p style="color: darkgray">已有帐号?<a href="https://im.qq.com/index">登录</a></p>
<form action="" method="post">
    <label for="name">用户名</label>
    <input type="text" placeholder="请输入用户名" id="name" class="number"> <br>
    <label for="phone">手机号</label>
    <select name="" id="two" class="number">
    <optgroup>
        <option style="" class="">+86</option>
    </optgroup>
    </select>
    <input type="text" placeholder="请输入手机号" id="phone" class="number"> <br>
    <label for="mima">密 码</label>
    <input type="password" placeholder="请输入密码" id="mima" class="number"> <br>
    <label for="mima">验证码</label>
    <input type="password" placeholder="请输入验证码" id="is" class="number">
    <div class="box_a"></div>
    <div class="boxs">
        <input type="radio" id="" class="accept">阅读并接受协议<br>
    </div>
    <input type="submit" value="注册" class="register" >

    </form>
</div>


</body>
</html>
在这里插入图片描述

在线咨询

上一篇：html中滚动字体的设置
下一篇：推荐50个超实用的 Chrome 扩展，建议收藏

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML表单及其Input输入类型

您的项目需求