整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

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>

<form action="/demo/demo_form.asp">

First name:<br>

<input type="text" name="Firstname" value="Mickey">

<br>

Last name:<br>

<input type="text" name="lastname" value="Mouse">

<br><br>

<input type="submit" value="Submit">

</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>

<input type="text" name="firstname">

<br>

Last name:<br>

<input type="text" name="lastname">

</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>

<form action="/demo/demo_form.asp">

First name:<br>

<input type="text" name="firstname" value="Mickey">

<br>

Last name:<br>

<input type="text" name="lastname" value="Mouse">

<br><br>

<input type="submit" value="Submit">

</form>

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

</body>

</html>

运行结果：

2、<select>元素

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

<!DOCTYPE html>

<html>

<body>

<form action="/demo/demo_form.asp">

<select name="cars">

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

<option value="saab">Saab</option>

<option value="fiat">Fiat</option>

<option value="audi">Audi</option>

</select>

<br><br>

<input type="submit">

</form>

</body>

</html>

运行结果：

3、<fieldset>元素

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

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

<!DOCTYPE html>

<html>

<body>

<form action="/demo/demo_form.asp">

<fieldset>

<legend>Personal information:</legend>

First name:<br>

<input type="text" name="firstname" value="Mickey">

<br>

Last name:<br>

<input type="text" name="lastname" value="Mouse">

<br><br>

<input type="submit" value="Submit">

</fieldset>

</form>

</body>

</html>

运行结果：

4、<textarea> 元素

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

<!DOCTYPE html>

<html>

<body>

<form>

<textarea name="message" rows="10" cols="30">

The cat was playing in the garden.

</textarea>

</form>

</body>

</html>

运行结果：

5、HTML5<datalist>元素

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

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

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

<!DOCTYPE html>

<html>

<body>

<form action="/demo/demo_form.asp">

<input list="browsers" name="browser">

<datalist id="browsers">

<option value="Internet Explorer">

<option value="Firefox">

<option value="Chrome">

<option value="Opera">

<option value="Safari">

</datalist>

<input type="submit">

</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输入类型的知识点能对大家有所帮助。

、 input分类

根据显示效果将input分为五类

  1. 文本框类：type值为text，password。
  2. 按钮类：type值为button，reset，submit。
  3. 选框类：type值为checkbox，radio。
  4. 图片类：type值为image。
  5. 文件类：type值为file。

二、原始显示效果

首先我们先看一下上述各类input在浏览器中原始显示效果，代码如下

     <!-- html-->
     <p>1.文本框类</p>
    <input type="text" class="text" value="文本" />
    <input type="password" class="password" value="密码" />
    <p>2.按钮类</p>
    <input type="button" class="button" />
    <input type="reset" class="reset" />
    <input type="submit" class="submit" />
    <p>3.选框类</p>
    <input type="checkbox" class="checkbox" name="" id="" />
    <input type="radio" class="radio" />
    <p>4.图片类</p>
    <!-- 此处省略了图片地址-->
    <input type="image" class="image" src="" />
    <p>5.文件类</p>
    <input type="file" class="file" />
    <input type="hidden" class="hidden" />

在pc端各主流浏览器中显示效果如下

在移动端各主流浏览器中显示效果如下


三、自定义样式（含清除默认样式）

1. 文本框类

（1）占位文本样式修改(placeholder)
占用文本样式修改使用伪元素::placeholder,这伪元素虽然还是一个实验功能，但是其实已经得到了大部分浏览器的支持，如果浏览器版本过低可以使用添加前缀来做兼容，MDN文档给的兼容情况如下图。

值得注意的是，该伪元素可以支持修改的属性值有限，具体支持的属性见下图

（2）聚焦样式修改（focus）
聚焦样式修改使用伪类:focus,该伪类可以支持修改input所有的css属性，可以放心使用
（3）常规样式修改
常规样式例如border，color，font-size的部分都可以直接修改。
（4）清除默认样式
上面css属性修改可以覆盖掉大部分原有的样式，从而达到清除默认样式的效果。但是在iOS中input上不会有默认的阴影样式覆盖不了，需要使用-webkit-appearance: none;将其清除。
注意：在ios中还有一个与其他浏览器不同的地方——当input的line-height大于font-size时，输入文字时光标长度不对，下图所示input的line-height=3，可以看出其光标是从input最上方开始的，这样显然显示效果不好，因此我们建议line-height=1，如果需要扩展input的高度，使用padding来实现。


2. 按钮类

按钮类input修改默认样式比较简单，只需要常规样式修改和伪类修改。其中伪类:hover和:active比较常用，只要用于修改悬停样式和点击样式。

3. 选框类

选框类input在不同浏览器中显示效果差别很大，因此对于前端开发者来说，自定义样式是很有必要的。
1）单选框样式自定义
常用的办法是隐藏原来的单选框，然后创建一个单选框。以下面代码为例

<!-- label中for属性值与input中id值相同即可关联 -->
<input type="radio" class="radio" name="sex" id="male"  />
<label for="male" class="label">男</label>
<input type="radio" class="radio" name="sex" id="female" />
<label for="female" class="label">女</label>

/*css*/
/* 隐藏原有的ridio选框 */
.radio {
  display: none;
}
.label {
  position: relative; /* 作为定位基准 */
  margin-left: 20px; /* 给label左侧添加margin（padding也行），给自定义radio留位置 */
}

/* 自定义radio（未选中）样式 */
.label::before {
  display: inline-block;
  position: absolute;
  content: "";
  width: 16px;
  height: 16px;
  border: 1px solid yellowgreen;
  left: -20px;
  top: 3px; /*根据label高度和自身需求设置top*/
}

/* 自定义radio（选中）样式 */
.radio:checked + .label::before {
  border: 1px solid skyblue;
}
.radio:checked + .label::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background-color: skyblue;
  left: -16px;
  top: 7px;
}

显示效果如下图

注意

  1. input类元素不支持:before和:after，因此需要靠label来实现；
  2. 上例使用了相邻选择器来选定元素，这是上述效果得以实现的基础（ridio和label中间不能添加其他的元素）。

上面的例子只是一种方法，如果不使用为元素，可以在radio和label中间添加一个div作为自定义的radio选框。

2）多选框样式自定义
多选框样式自定义与单选框自定义样式的方式一摸一样，如下面代码

<!-- html -->
<input type="checkbox" class="checkbox" name="sex" id="male" />
<label for="male" class="label">男</label>
<input type="checkbox" class="checkbox" name="sex" id="female" checked />
<label for="female" class="label">女</label>
<input type="checkbox" class="checkbox" name="sex" id="undefind" checked />
<label for="undefind" class="label">不明</label>

/* css*/
/* 隐藏原有的checkbox选框 */
.checkbox {
  display: none;
}
.label {
  position: relative; /* 作为定位基准 */
  margin-left: 20px; /* 给label左侧添加margin（padding也行），给自定义checkbox留位置 */
}

/* 自定义checkbox（未选中）样式 */
.label::before {
  display: inline-block;
  position: absolute;
  content: "";
  width: 16px;
  height: 16px;
  border: 1px solid yellowgreen;
  left: -20px;
  top: 3px; /*根据label高度和自身需求设置top*/
}

/* 自定义checkbox（选中）样式 */
.checkbox:checked + .label::before {
  border: 1px solid skyblue;
}
.checkbox:checked + .label::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background-color: skyblue;
  left: -16px;
  top: 7px;
}

显示效果如下图

4. 图片类

这类input在平常使用较少，如果需要显示图片建议直接使用img标签。

5. 文件类

目前常用的做法是使用元素（一般使用a元素）包裹住input，外层元素样式即为此次自定义样式，同时将input透明度设置为0，宽高与外层元素宽高一致，这样可以保证点击外层元素是出发input。示例代码如下

<!-- html -->
<a href="javascript：;" class="file">
  <input type="file" name="" id="" />点击这里上传文件
</a>

/* css */
.file {
  padding: 4px 10px;
  height: 20px;
  line-height: 20px;
  position: relative;
  cursor: pointer;
  color: #888;
  background: #fafafa;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
  display: inline-block;
  zoom: 1;
}
.file input {
  position: absolute;
  opacity: 0;
  filter: alpha(opacity= 0);
  cursor: pointer;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.file:hover {
  color: #444;
  background: #eee;
  border-color: #ccc;
  text-decoration: none;
}

显示效果如下：

注意：以上操作会隐藏上传的文件，如果需要显示，需要额外添加一个元素并且配合使用js用于显示上传的文件，在此不过多说明，有兴趣的可以自行研究。

、input元素。

你会惊讶于input标签居然可以做出这么多控件元素。

图1

 <input type="text">
 <!-- 这是文本输入框 -->
 <input type="password">
 <!-- 这是带密码的文本输入框 -->
 <input type="radio">
 <!-- 这是单选项 -->
 <input type="checkbox">
 <!-- 这是多选项 -->
 <input type="file">
 <!-- 这是文件上传选取项 -->
 <input type="button" value="点我吧">
 <!-- 这是按钮 -->

二、label元素。

其实它只是一个很普通的文本元素控件，就像编程里的label一样，只是它的for属性有那么点意思，for属性可以关联其它控件，当你设置好关联后，点击label就会自动移动焦点到其它控件上，不好理解就看图2图3吧。

<label>我是一个普通的标签</label>

图2

图3


在线咨询
上一篇：前端入门-先从制作一个简单的html5网页开始
下一篇：oracle自动巡检脚本生成html报告

您的项目需求

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

推荐阅读
友情链接 芳村区 济源市 中方县 罗庄区 准格尔旗 杨浦区 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服