重学前端详解表单 / 详解input / 浏览器私有前缀的作用（第六天）

最新推荐文章于 2024-11-03 10:39:08 发布

PBitW

最新推荐文章于 2024-11-03 10:39:08 发布

阅读量1.3k

点赞数 1

分类专栏：重学前端1 HTML 文章标签：详解表单详解input 浏览器私有前缀经验分享

本文链接：https://blog.youkuaiyun.com/langwang_100/article/details/107515920

版权

菜鸟肝了两天半，搞了43100个字，最后实在写不下去了，有缘再回来继续搞，反正最近是不可能了，望大家三连（点赞、评论、分享）！！！

文章目录

form表单
- action
- method
- name
label（标记）
神奇的input
textarea（文本区域）
fieldset 和 legend（分组和组名）
- min-inline-size【基本解决，较容易理解】
select 和 option
datalist（可能选项列表）
output（输出显示）
- for

form表单

< form> 标签用于创建供用户输入的 HTML 表单。

< form> 元素包含一个或多个如下的表单元素：

< input>
< textarea>
< button>
< select>
< option>
< optgroup>
< fieldset>
< label>

基本格式：

<form action="demo_form.php" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="提交">
</form>

action

规定当提交表单时向何处发送表单数据。(在 HTML5 中，action 属性不再是必需的，毕竟有时候只是测试，不需要发送给什么)
在这里插入图片描述

method

method 方法规定如何发送表单数据（form-data）（表单数据会被发送到在 action 属性中规定的页面中）。

表单数据可被作为 URL 变量的形式来发送（method=“get”）或者作为 HTTP post 事务的形式来发送（method=“post”）。

关于 GET 的注释：

将表单数据以名称/值对的形式附加到 URL 中
URL 的长度是有限的（大约 3000 字符）
绝不要使用 GET 来发送敏感数据！（在 URL 中是可见的）
对于用户希望加入书签的表单提交很有用
GET 更适用于非安全数据，比如：在 Google 中查询字符串

关于 POST 的注释：

将表单数据附加到 HTTP 请求的 body 内（数据不显示在 URL 中）
没有长度限制
通过 POST 提交的表单不能加入书签

在这里插入图片描述

name

name 属性规定表单的名称。

name 属性用于在 JavaScript 中引用元素，或者在表单提交之后引用表单数据。
在这里插入图片描述
表单域定义的时候，必须要有name属性，name属性要有值，这时http请求包含表单域中输入的信息。

注意：

如果不给要用到的数据添加name，那么后台是获取不到的！

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	</head>
	<body>
		<div class="container">
		  	<form action="Servlet" method="post">
			  <div class="form-group">
			    <label for="exampleInputEmail1">Email address</label>
			    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email" name="username">
			  </div>
			  <div class="form-group">
			    <label for="exampleInputPassword1">Password</label>
			    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" name="userpw">
			  </div>
			  <div class="form-group">
			    <label for="exampleInputFile">File input</label>
			    <input type="file" id="exampleInputFile">
			    <p class="help-block">Example block-level help text here.</p>
			  </div>
			  <div class="checkbox">
			    <label>
			      <input type="checkbox"> Check me out
			    </label>
			  </div>
			  <button type="submit" class="btn btn-default" name="sub">Submit</button>
		    </form>
		</div>
	</body>
</html>

运行结果：
在这里插入图片描述

label（标记）

< label> 标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件，就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

< label> 标签的 for 属性应当与相关元素的 id 属性相同。

提示：
“for” 属性可把 label 绑定到另外一个元素，请把 “for” 属性的值设置为相关元素的 id 属性的值。
在这里插入图片描述
读者自己运行这段代码就知道了：

<form>
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" value="female"><br><br>
</form>

神奇的input

< input> 标签规定了用户可以在其中输入数据的输入字段。在 < form> 元素中使用，用来声明允许用户输入数据的 input 控件。输入字段可通过多种方式改变，取决于 type 属性。

注意：

< input> 元素是空元素，它只包含标签属性

可以使用 < label> 元素来定义 < input> 元素的标注

为什么说input神奇？因为它能干的事情太多了！来看看它的type的取值就知道了(每一个type就是一个新的功能)：
在这里插入图片描述

input源css（及type=text）

在讲之前，先来看看input不写type时的默认源css：

input {
   
    -webkit-writing-mode: horizontal-tb !important;
    text-rendering: auto;
    color: -internal-light-dark(black, white);
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    appearance: textfield;
    background-color: -internal-light-dark(rgb(255, 255, 255), rgb(59, 59, 59));
    -webkit-rtl-ordering: logical;
    cursor: text;
    margin: 0em;
    font: 400 13.3333px Arial;
    padding: 1px 2px;
    border-width: 2px;
    border-style: inset;
    border-color: -internal-light-dark(rgb(118, 118, 118), rgb(195, 195, 195));
    border-image: initial;
}

浏览器前缀

提醒一下：

CSS3中新增了一些属性，例如：box-reduis、box-orient、text-overflow等等，而这些属性在以往的版本中是不存在的，或者不被支持的，因此，针对不同的浏览器，规定其内核名称让它们可以对这些新增属性进行解析。

大多数浏览器的前缀包括：

-moz- : Firefox
-webkit- : Safari & Chrome
-o- : Opera
-khtml- : Konqueror
-ms- : Internet Explorer
-chrome- : Google Chrome专用前缀

于是，开发者可以将代码写成：

#test{
-moz-box-shadow:2px 2px 2px #ccc;
-webkit-box-shadow:2px 2px 2px #ccc;
box-shadow:2px 2px 2px #ccc;
}

注意它们之间的顺序，不带浏览器核心前缀声明的一则放在最后。比如：一旦firefox对该属性的支持被确定，最后一条会覆盖前面的。

说白了就一句话，浏览器可能不支持新的属性，但每个浏览器都会按照自己的想法去兼容，而声名这个前缀就是，看看这个属性在该浏览器是否兼容，兼容则最后一个替换掉前面，并按该浏览器的想法实现效果，如果不支持那就按不支持的显示！

补充说明：

在CSS属性能中，我们常常能看到-webkit-，-moz-之类的前缀，这种就叫做浏览器私有前缀，是浏览器对于新CSS属性的一个提前支持。
为什么要有私有前缀呢？因为制定HTML和CSS标准的组织W3C动作是很慢的。通常，有w3c组织成员提出一个新属性，比如说圆角border-radius，大家都觉得好，但是w3c不会为这个属性制定标准，而是要走很复杂的程序，经过很多审查。而浏览器商不愿意等那么久，他们觉得一个属性已经够成熟了，就会在浏览器中加入支持。但是避免日后w3c公布标准时有所变更，就会加入一个私有前缀，比如-webkit-border-radius，通过这种方式来提前支持新属性，等到日后w3c公布了标准，border-radius的标准写法确立之后，再让新版的浏览器支持border-radius这种写法。比方说：Chrome 10是不认border-radius这种写法的，只能用webkit-border-radius，而Chrome12就能认了。于是在写CSS的时候，这样写就能确保Chrome10和Chrome12浏览网页的时候都能够正确显示。

writing-mode（文本在水平或垂直方向上的排布）【对于input】

在这里插入图片描述
但是菜鸟在goole里面尝试调成其他的再输入，呃，，，，没有任何卵用！（然后菜鸟发现，firefox支持，但是goole不支持这个属性，我就在想，难道我的goole还没到8.0？见鬼了？也可能是菜鸟教程有点问题）

然后菜鸟在Firefox里进行的测试，发现horizontal-tb | vertical-rl | vertical-lr 都并不会换行，绝对不会！再长都是一行，所以horizontal-tb就是从左到右，vertical-rl | vertical-lr 并没有什么区别，都是从上到下。

sideways-lr

在这里插入图片描述

sideways-rl

在这里插入图片描述

2020/8/13补（对于可换行元素）：

上面的仅针对于input，如果是其他的（eg：textarea…），那么是可以换行的。

这时候属性之间可以产生较为明显的差别！读者可自己实验后留言！！！菜鸟会积极收录！

text-rendering（定义浏览器引擎如何渲染字体）

CSS 属性定义浏览器渲染引擎如何渲染字体，浏览器会在速度、清晰度、几何精度之间进行权衡。

该属性是 SVG 的属性而不是标准的 CSS 属性。但是 Gecko（Firefox）和 Webkit（Chrome、Safari）内核的浏览器允许该属性在 Windows、Mac OS 和 Linux 操作系统中应用于 HTML 和 XML 内容。

auto

浏览器依照某些根据去推测在绘制文本时，何时该优化速度，易读性或者几何精度。对于该值在不同浏览器中解释的差异，请看兼容性表。

optimizeSpeed

浏览器在绘制文本时将着重考虑渲染速度，而不是易读性和几何精度. 它会使字间距和连字无效。

optimizeLegibility

浏览器在绘制文本时将着重考虑易读性，而不是渲染速度和几何精度.它会使字间距和连字有效。该属性值在移动设备上会造成比较明显的性能问题，详细查看 text-rendering (好像要翻墙)。

geometricPrecision

浏览器在绘制文本时将着重考虑几何精度，而不是渲染速度和易读性。字体的某些方面—比如字间距—不再线性缩放，所以该值可以使使用某些字体的文本看起来不错。

对于 SVG，当文本缩放时，浏览器会计算文本最终大小（取决于特定的字体大小和相应的缩放比例）并且从操作平台的字体系统中请求一个符合该计算值的字体大小。但如果你请求一个字体大小，比如 9 并且 140% 的缩放，这个最终的字体大小为 12.6，字体系统中明显不存在，所以浏览器会向下取整到 12。这导致文本缩放是阶梯式的。

但这个 geometricPrecision 特性——当被渲染引擎完全支持时——会使文本缩放是流畅的。对于大比例的缩放，你可能看到并不太漂亮的文本渲染，但这个字体大小是你期望的，而不是被 Windows 或 Linux 系统四舍五入或向下取整的字体大小。

提示:

WebKit 准确地的实现了这个值, 但是 Gecko 把这个值按照 optimizeLegibility 处理。

（这个属性反正菜鸟还没用到过，先做了解，φ(゜▽゜*)♪）

-internal-light-dark【未解决】

这里菜鸟在firefox和goole上都试了一下，结果咂舌！

Firefox：
在这里插入图片描述
goole：

原谅菜鸟/(ㄒoㄒ)/~~，大佬读者积极留言指点！而且菜鸟搜了半天，也没收到有关background-color: -internal-light-dark 、border-color: -internal-light-dark 和 color: -internal-light-dark 的内容！

letter-spacing（字符间距）

letter-spacing 属性增加或减少字符间的空白（字符间距）。该属性定义了在文本字符框之间插入多少空间。由于字符字形通常比其字符框要窄，指定长度值时，会调整字母之间通常的间隔。因此，normal 就相当于值为 0。

注释：
允许使用负值，这会让字母之间挤得更紧。
在这里插入图片描述

word-spacing （字间隔）

word-spacing 属性增加或减少单词间的空白（即字间隔）。该属性定义元素中字之间插入多少空白符，针对这个属性，“字” 定义为由空白符包围的一个字符串。如果指定为长度值，会调整字之间的通常间隔；所以，normal 就等同于设置为 0，允许指定负长度值，这会让字之间挤得更紧。

注释：
允许使用负值。

注释：
CSS 把“字（word）”定义为任何非空白符字符组成的串，并由某种空白字符包围。这个定义没有实际的语义，它只是假设一个文档包含由一个或多个空白字符包围的字。支持 CSS 的用户代理不一定能确定一个给定语言中哪些是合法的字，而哪些不是。尽管这个定义没有多大价值，不过它意味着采用象形文字的语言或非罗马书写体往往无法指定字间隔。

提示：
利用这个属性，可能会创建字间隔太宽的文档，所以，使用 word-spacing 时要小心。

在这里插入图片描述

letter-spacing 和 word-spacing 区别

这里菜鸟演示一下letter-spacing 和 word-spacing 的区别：

<p style="word-spacing: 30px;">this is english</p>
<p style="letter-spacing: 30px;">this is english</p>
<p style="word-spacing: 30px;">这是中文的</p>
<p style="word-spacing: 30px;">这是 中文的</p>
<p style="letter-spacing: 30px;">这是中文的</p>

<p style="word-spacing: -10px;">this is english</p>
<p style="letter-spacing: -10px;">this is english</p>
<p style="word-spacing: -10px;">这是中文的</p>
<p style="word-spacing: -20px;">这是 中文的</p>
<p style="letter-spacing: -10px;">这是中文的</p>

运行结果：
在这里插入图片描述

text-transform（控制文本大小写）

text-transform 属性控制文本的大小写。这个属性会改变元素中的字母大小写，而不论源文档中文本的大小写。如果值为 capitalize，则要对某些字母大写，但是并没有明确定义如何确定哪些字母要大写，这取决于用户代理如何识别出各个 “ 词 ”。

注释：
不同的用户代理可能会用不同的方法来确定单词从哪里开始，相应地确定哪些字母要大写。例如，文本 “w3-school” 可以用两种方式显示：“W3-school” 和 “W3-School”。CSS 并没有规定哪一种是正确的，所以这两种都是可以的。

在这里插入图片描述

text-indent（文本块首页缩进）

text-indent 属性规定文本块中首行文本的缩进。

注释：
允许使用负值。如果使用负值，那么首行会被缩进到左边。

注意：
在 CSS 2.1 之前，text-indent 总是继承计算值，而不是声明值。

说明：
用于定义块级元素中第一个内容行的缩进。这最常用于建立一个“标签页”效果。允许指定负值，这会产生一种 “悬挂缩进” 的效果。
在这里插入图片描述
菜鸟试了一下，感觉负值是真的丑，不知道什么情况可以用负值

<p style="text-indent: 30px;">this is english</p>
<p style="text-indent: -30px;">this is english</p>

最低0.47元/天解锁文章

重学前端 详解表单 / 详解input / 浏览器私有前缀的作用（第六天）

文章目录

form表单

action

method

name

label（标记）

神奇的input

input源css（及type=text）

浏览器前缀

writing-mode（文本在水平或垂直方向上的排布）【对于input】

sideways-lr

sideways-rl

2020/8/13补（对于可换行元素）：

text-rendering（定义浏览器引擎如何渲染字体）

-internal-light-dark【未解决】

letter-spacing（字符间距）

word-spacing （字间隔）

letter-spacing 和 word-spacing 区别

text-transform（控制文本大小写）

text-indent（文本块首页缩进）

重学前端详解表单 / 详解input / 浏览器私有前缀的作用（第六天）