[网站开发入门指南21] 表单元素们中的input标签｜ html

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

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

·表单其实英文是叫做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，这个东西是单选框里面非常重要的知识点。

用鼠标改变元素的尺寸。

如需了解更多有关 resizable 交互的细节，请查看 API 文档可调整尺寸小部件（Resizable Widget）。

默认功能

在任意的 DOM 元素上启用 resizable 功能。通过鼠标拖拽右边或底边的边框到所需的宽度或高度。

<!doctype html><html lang="en"><head>
 <meta charset="utf-8">
 <title>jQuery UI 缩放（Resizable） - 默认功能</title>
 <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
 <script src="//code.jquery.com/jquery-1.9.1.js"></script>
 <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
 <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
 <style>
 #resizable { width: 150px; height: 150px; padding: 0.5em; }
 #resizable h3 { text-align: center; margin: 0; }
 </style>
 <script>
 $(function() {
 $( "#resizable" ).resizable();
 });
 </script></head><body>
<div id="resizable" class="ui-widget-content">
 <h3 class="ui-widget-header">缩放（Resizable）</h3></div>
</body></html>

查看演示

动画

使用 animate 选项（布尔值）使缩放行为动画化。当该选项设置为 true 时，拖拽轮廓到所需的位置，元素会在拖拽停止时以动画形式调整到该尺寸。

<!doctype html><html lang="en"><head>
 <meta charset="utf-8">
 <title>jQuery UI 缩放（Resizable） - 动画</title>
 <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
 <script src="//code.jquery.com/jquery-1.9.1.js"></script>
 <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
 <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
 <style>
 #resizable { width: 150px; height: 150px; padding: 0.5em; }
 #resizable h3 { text-align: center; margin: 0; }
 .ui-resizable-helper { border: 1px dotted gray; }
 </style>
 <script>
 $(function() {
 $( "#resizable" ).resizable({
 animate: true
 });
 });
 </script></head><body>
<div id="resizable" class="ui-widget-content">
 <h3 class="ui-widget-header">动画</h3></div>
</body></html>

查看演示

限制缩放区域

定义缩放区域的边界。使用 containment 选项来指定一个父级的 DOM 元素或一个 jQuery 选择器，比如 'document.'。

<!doctype html><html lang="en"><head>
 <meta charset="utf-8">
 <title>jQuery UI 缩放（Resizable） - 限制缩放区域</title>
 <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
 <script src="//code.jquery.com/jquery-1.9.1.js"></script>
 <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
 <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
 <style>
 #container { width: 300px; height: 300px; }
 #container h3 { text-align: center; margin: 0; margin-bottom: 10px; }
 #resizable { background-position: top left; width: 150px; height: 150px; }
 #resizable, #container { padding: 0.5em; }
 </style>
 <script>
 $(function() {
 $( "#resizable" ).resizable({
 containment: "#container"
 });
 });
 </script></head><body>
<div id="container" class="ui-widget-content">
 <h3 class="ui-widget-header">限制</h3>
 <div id="resizable" class="ui-state-active">
 <h3 class="ui-widget-header">缩放（Resizable）</h3>
 </div></div>
</body></html>

查看演示

延迟开始

通过 delay 选项设置延迟开始缩放的毫秒数。通过 distance 选项设置光标被按下且拖拽指定像素后才允许缩放。

<!doctype html><html lang="en"><head>
 <meta charset="utf-8">
 <title>jQuery UI 缩放（Resizable） - 延迟开始</title>
 <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
 <script src="//code.jquery.com/jquery-1.9.1.js"></script>
 <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
 <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
 <style>
 #resizable, #resizable2 { width: 150px; height: 150px; padding: 0.5em; }
 #resizable h3, #resizable2 h3 { text-align: center; margin: 0; }
 </style>
 <script>
 $(function() {
 $( "#resizable" ).resizable({
 delay: 1000
 });
 $( "#resizable2" ).resizable({
 distance: 40
 });
 });
 </script></head><body>
<h3 class="docs">时间延迟 (ms):</h3><div id="resizable" class="ui-widget-content">
 <h3 class="ui-widget-header">时间</h3></div>
<h3 class="docs">距离延迟 (px):</h3><div id="resizable2" class="ui-widget-content">
 <h3 class="ui-widget-header">距离</h3></div>
</body></html>

查看演示

助手

通过设置 helper 选项为一个 CSS class，当缩放时只显示元素的轮廓。

<!doctype html><html lang="en"><head>
 <meta charset="utf-8">
 <title>jQuery UI 缩放（Resizable） - 助手</title>
 <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
 <script src="//code.jquery.com/jquery-1.9.1.js"></script>
 <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
 <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
 <style>
 #resizable { width: 150px; height: 150px; padding: 0.5em; }
 #resizable h3 { text-align: center; margin: 0; }
 .ui-resizable-helper { border: 2px dotted #00F; }
 </style>
 <script>
 $(function() {
 $( "#resizable" ).resizable({
 helper: "ui-resizable-helper"
 });
 });
 </script></head><body>
<div id="resizable" class="ui-widget-content">
 <h3 class="ui-widget-header">助手</h3></div>
</body></html>

查看演示

最大/最小尺寸

使用 maxHeight、maxWidth、minHeight 和 minWidth 选项限制 resizable 元素的最大或最小高度或宽度。

<!doctype html><html lang="en"><head>
 <meta charset="utf-8">
 <title>jQuery UI 缩放（Resizable） - 最大/最小尺寸</title>
 <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
 <script src="//code.jquery.com/jquery-1.9.1.js"></script>
 <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
 <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
 <style>
 #resizable { width: 200px; height: 150px; padding: 5px; }
 #resizable h3 { text-align: center; margin: 0; }
 </style>
 <script>
 $(function() {
 $( "#resizable" ).resizable({
 maxHeight: 250,
 maxWidth: 350,
 minHeight: 150,
 minWidth: 200
 });
 });
 </script></head><body>
<div id="resizable" class="ui-widget-content">
 <h3 class="ui-widget-header">放大/缩小</h3></div>
</body></html>

查看演示

保持纵横比

保持现有的纵横比或设置一个新的纵横比来限制缩放比例。设置 aspectRatio 选项为 true，且可选地传递一个新的比率（比如，4/3）。

<!doctype html><html lang="en"><head>
 <meta charset="utf-8">
 <title>jQuery UI 缩放（Resizable） - 保持纵横比</title>
 <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
 <script src="//code.jquery.com/jquery-1.9.1.js"></script>
 <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
 <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
 <style>
 #resizable { width: 160px; height: 90px; padding: 0.5em; }
 #resizable h3 { text-align: center; margin: 0; }
 </style>
 <script>
 $(function() {
 $( "#resizable" ).resizable({
 aspectRatio: 16 / 9
 });
 });
 </script></head><body>
<div id="resizable" class="ui-widget-content">
 <h3 class="ui-widget-header">保持纵横比</h3></div>
</body></html>

查看演示

对齐到网格

对齐 resizable 元素到网格。通过 grid 选项设置网格单元的尺寸（以像素为单位的高度和宽度）。

<!doctype html><html lang="en"><head>
 <meta charset="utf-8">
 <title>jQuery UI 缩放（Resizable） - 对齐到网格</title>
 <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
 <script src="//code.jquery.com/jquery-1.9.1.js"></script>
 <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
 <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
 <style>
 #resizable { width: 150px; height: 150px; padding: 0.5em; }
 #resizable h3 { text-align: center; margin: 0; }
 </style>
 <script>
 $(function() {
 $( "#resizable" ).resizable({
 grid: 50
 });
 });
 </script></head><body>
<div id="resizable" class="ui-widget-content">
 <h3 class="ui-widget-header">网格</h3></div>
</body></html>

同步缩放

通过点击并拖拽一个元素的边来同时调整多个元素的尺寸。给 alsoResize 选项传递一个共享的选择器。

<!doctype html><html lang="en"><head>
 <meta charset="utf-8">
 <title>jQuery UI 缩放（Resizable） - 同步缩放</title>
 <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
 <script src="//code.jquery.com/jquery-1.9.1.js"></script>
 <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
 <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
 <style>
 #resizable { background-position: top left; }
 #resizable, #also { width: 150px; height: 120px; padding: 0.5em; }
 #resizable h3, #also h3 { text-align: center; margin: 0; }
 #also { margin-top: 1em; }
 </style>
 <script>
 $(function() {
 $( "#resizable" ).resizable({
 alsoResize: "#also"
 });
 $( "#also" ).resizable();
 });
 </script></head><body>
<div id="resizable" class="ui-widget-header">
 <h3 class="ui-state-active">缩放</h3></div>
<div id="also" class="ui-widget-content">
 <h3 class="ui-widget-header">同步缩放</h3></div>
</body></html>

查看演示

文本框

可缩放的文本框。

<!doctype html><html lang="en"><head>
 <meta charset="utf-8">
 <title>jQuery UI 缩放（Resizable） - 文本框</title>
 <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
 <script src="//code.jquery.com/jquery-1.9.1.js"></script>
 <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
 <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
 <style>
 .ui-resizable-se {
 bottom: 17px;
 }
 </style>
 <script>
 $(function() {
 $( "#resizable" ).resizable({
 handles: "se"
 });
 });
 </script></head><body>
<textarea id="resizable" rows="5" cols="20"></textarea>
</body></html>

视觉反馈

通过设置 ghost 选项为 true，可在缩放期间显示一个半透明的元素，而不是显示一个实际的元素。

门一种新的插件有没有一种通用的方法呢？

以下将需要3分钟左右的阅读时间。

第一步阅读说明简介。了解到：目前是4.4版支持Bootstrap3.x及4.0版。5.x版本是重写的一个最新版本。该插件去预览上传多种格式的文件。支持Ajax。以下以4.4版说明。

来原网络

第二步安装（引用）。引用CSS、JS（注意顺序）

CSS：bootstrap.min.css，fileinput.min.css

JS：

jquery-3.3.1.min.js，（必需）

piexif.min.js（可选，可以在上传前改变图片），

sortable.min.js（可选，如果要排序文件的话），

popper.min.js（可选，用于放大和预览文件），

bootstrap.min.js，（必需）

fileinput.min.js，（主文件）

theme.js，（主题包，字体）

(lang).js（本地化，中文引入zh.js）

第三步使用。

<!--HTML  input标签 ，注意type是file-->
<input id="ID" type="file" class="file" data-preview-file-type="text" >

$("#ID").fileinput();//默认功能，$("#input-id") 。Jquery对象，HTML代码中的id为ID
															//fileinput()执行函数。可以放在$(function(){..放在这里..})也可以放在任何
															//一位置

总结：以上是步骤，相信学习一个新的插件都能以这种标准流程一定会有收获。

下次将分享常用的属性和例子代码学习。

详细学习两个重要的属性：initialPreview，initialPreviewConfig。

下回再见。谢谢阅读。晚安。

在线咨询

上一篇：@各位考生，这两项职业资格考试等你报名
下一篇：HTML ul li 横排居中排列的方法，三步骤及实例

您的项目需求

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

整合营销服务商

[网站开发入门指南21] 表单元素们中的input标签｜ html

您的项目需求