【Web 表单】与用户数据打交道-1(mdn笔记)
0. Web 表单指南
我们将介绍 Web 表单的各个方面：HTML 结构、样式、验证表单数据，以及提交数据到服务器。
基本指南
你的第一个表单
第一次创建 HTML 表单的经验，包括设计一个简单表单、使用正确的 HTML 元素实现它、通过 CSS 添加一些非常简单的样式，以及如何将数据发送到服务器。
如何构造 HTML 表单
用于为表单的不同部分提供结构和意义的元素。
不同的表单控件
原生表单控件
了解原始 HTML 元素的类型开始，同时学习在收集不同类型数据时可用的选择
HTML5 input 的类型
深入挖掘 元素，了解 HTML5 发布时提供的其他 input 类型，以及它们提供的各种 UI 控件和数据收集增强功能。此外，我们可以了解
其他表单控件
接下来，我们学习所有非 表单控件，以及相关的工具，如：
单击type 属性定义为 reset 值 的按钮 将所有表单小部件重新设置为它们的默认值。从用户体验的角度来看，这被认为是一种糟糕的做法。
单击 type 属性定义为 button 值的按钮，**不会发生任何事！**这听起来很傻，但是用 JavaScript 构建定制按钮非常有用。
备注：你还可以使用相应类型的 元素来生成一个按钮，如 。
1.4 基本表单样式
添加一些 CSS 来让它看起来很好:
1.5 向你的 web 服务器发送表单数据
组织你的静态文件
三个额外的静态文件：
明信片的背景——下载这幅图片，把它和你的 HTML 文件保存在相同目录下。
打字机字体：源自 fontsquirrel.com 的 "Secret Typewriter“字体——将 TTF 文件下载到和上面相同的文件夹里。
手绘字体：源自 fontsquirrel.com 的 The "Journal" 字体 —— 将 TTF 文件下载到和上面相同的文件夹里。
对字体做一些处理：
打开 fontsquirrel 网络字体生成器.
使用表单，上传你的字体文件并生成一个网络字体包，将这个包下载到你的电脑上。
解压提供的 zip 文件。
再解压后的文件内容里你会找到两个 .woff 文件和两个.woff2 文件。将这四个文件拷贝到一个叫 fonts 的文件夹里，而 fonts 文件夹位于和上面相同的文件夹里。我们为每种字体使用两个不同的文件以最大限度地保证浏览器兼容性。查看我们的 Web 字体 一文获取更多信息。
CSS
/*定义 手写字体 规则*/
@font-face {
font-family: 'handwriting'; /* 定义字体名称 */
src: url('fonts/journal-webfont.woff2') format('woff2'), /* 指定字体文件的位置和格式 */
url('fonts/journal-webfont.woff') format('woff');
font-weight: normal; /* 定义字体粗细 */
font-style: normal; /* 定义字体样式 */
}
/*定义机打字体*/
@font-face {
font-family: 'typewriter'; /* 定义另一种字体名称 */
src: url('fonts/veteran_typewriter-webfont.woff2') format('woff2'), /* 指定字体文件的位置和格式 */
url('fonts/veteran_typewriter-webfont.woff') format('woff');
font-weight: normal; /* 定义字体粗细 */
font-style: normal; /* 定义字体样式 */
}
body {
font : 1.3rem sans-serif; /* 定义 body 元素的字体大小和类型 */
padding : 0.5em; /* 定义 body 元素的内边距 */
margin : 0; /* 定义 body 元素的外边距 */
background : #222; /* 定义 body 元素的背景颜色 */
}
form {
/* 设置表单定位为相对定位 */
position: relative;
/* 设置表单宽度为740px */
width: 740px;
/* 设置表单高度为498px */
height: 498px;
/* 设置外边距上下左右为0,实现水平居中 */
margin: 0 auto;
/* 设置内边距为1em */
padding: 1em;
/* 设置盒子模型为border-box */
box-sizing: border-box;
/* 设置背景颜色及背景图片 */
background: #FFF url(background.jpg);
/* 使用CSS Grid网格布局 */
display: grid;
/* 设置列间距和行间距为20px */
gap: 20px;
/* 定义2列,每列1个弹性单位 */
grid-template-columns: repeat(2, 1fr);
/* 定义4行,设置各行高度 */
grid-template-rows: 10em 1em 1em 1em;
}
/* 设置标题字体和对齐方式 */
h1 {
font: 1em "typewriter", monospace;
align-self: end;
}
/* 设置 message 区域在网格的位置 */
#message {
grid-row: 1 / 5;
}
/* 设置flex布局 */
#from, #reply {
display: flex;
}
/* 设置 label 的字体 */
label {
font: .8em "typewriter", sans-serif;
}
/* 设置输入框和文本域的字体 */
input,textarea {
font: 1.4em/1.5em "handwriting", cursive, sans-serif;
/* 去除边框 */
border: none;
/* 设置内边距 */
padding: 0 10px;
/* 去除外边距 */
margin: 0;
/* 设置宽度为80% */
width: 80%;
/* 去除背景 */
background: none;
}
/* 获得焦点时的样式 */
input:focus,textarea:focus {
background: rgba(0,0,0,.1);
border-radius: 5px;
outline: none;//移除由某些浏览器添加的默认高亮效果：
}
/* 设置文本域为块级元素 */
textarea {
display: block;
/* 设置内边距 */
padding: 10px;
/* 设置外边距 */
margin: 10px 0 0 -10px;
/* 设置宽度为100% */
width: 100%;
/* 设置高度为90% */
height: 90%;
/* 显示右边框 */
border-right: 1px solid;
resize: none;/*/*防止用户调整我们的多行文本域的大小*/
/* 溢出隐藏 */
overflow: auto;
}
/* 设置按钮内边距 */
button {
padding: 5px;
/* 设置文字样式 */
font: bold .6em sans-serif;
/* 设置边框 */
border: 2px solid #333;
/* 设置圆角 */
border-radius: 5px;
/* 去除背景 */
background: none;
/* 设置鼠标手势 */
cursor: pointer;
/* 设置旋转 */
transform: rotate(-1.5deg);
}
/* 设置按钮伪元素内容 */
button:after {
content: " >>>";
}
/* 设置按钮态样式 */
button:hover,button:focus {
outline: none;
background: #000;
color: #FFF;
}备注： 如果你的例子没有像你预期的那样工作，你想将它同我们的版本检查对比，你可以在 Github 上找到它 —— 查看在线演示.
若我们想构建只包含文本域和按钮的表单，用 CSS 美化它们非常容易。
7. 高级设计 HTML 表单(英文)
HTML表单怎样使用CSS装饰难以定制的表单小部件。如前面章节 (en-US)所示，文本字段和按钮非常容易设置样式; 设置更难样式化的表单控件类型-“坏”和“丑陋”类别.Advanced form styling
The bad: 有些元素更难设置样式，需要更复杂的CSS或一些更具体的技巧：
Checkboxes and radio buttons
复选框和单选按钮搜索框
The ugly: 某些元素无法使用CSS彻底设置样式。
下拉部件，包括
颜色控件
与日期相关的控件，例如
7.1 外观：控制操作系统级样式
创建该 appearance 属性是为了控制将哪些操作系统或系统级样式应用于 Web 窗体控件。
最有用的值（也可能是唯一一个您将使用的值）是 none 会尽可能阻止应用它的任何控件使用系统级样式，并允许您使用 CSS 自行构建样式。
应用以下 CSS 会删除系统级样式。
input {
appearance: none;
}下面的实时示例向您展示了它们在您的系统中的外观 — 左侧默认，右侧应用了上述 CSS
body {
margin: 20px auto; /* 设置顶部和底部边距为20px，并使body水平居中 */
max-width: 800px; /* 设置body的最大宽度为800px */
justify-content: space-around; /* 沿主轴均匀分布项目 */
}
body, form > div {
display: flex; /* 将body和form的直接子div元素的display属性设置为flex */
}
form > div {
margin-bottom: 20px; /* 设置form的直接子div元素的底部边距为20px */
}
.appearance input {
appearance: none; /* 移除类名为"appearance"的元素内input元素的默认外观 */
}
在大多数情况下，效果是删除风格化的边框，这使得CSS样式更容易一些.
Taming search boxes 驯服搜索框
禁用默认外观：
input[type="search"] {
appearance: none;
}设置复选框和单选按钮的样式
考虑以下简单的测试用例：
span {
display: inline-block;
background: red;
}
input[type="checkbox"] {
width: 100px;
height: 100px;
}不同的浏览器处理复选框并跨越不同的方式，通常是丑陋的：
使用外观：none on radios/checkboxes 单选按钮和复选框none
以下示例 HTML 使用appearance :none 完全删除复选框或单选按钮 的默认外观：
input[type="checkbox"] {
appearance: none;/*取消原始复选框的样式*/
}我们可以使用 and :checked :disabled 伪类在自定义复选框的状态更改时更改其外观：
input[type="checkbox"] {
position: relative; /* 设置相对定位 */
width: 1em; /* 设置宽度为1em */
height: 1em; /* 设置高度为1em */
border: 1px solid gray; /* 设置边框为1px实线灰色 */
/* 调整复选框在文本基线上的位置 */
vertical-align: -2px;
/* 在此处设置，以便Windows的高对比度模式可以覆盖 */
color: green;
}
input[type="checkbox"]::before {
content: "?"; /* 设置内容为"?" */
position: absolute; /* 设置绝对定位 */
font-size: 1.2em; /* 设置字体大小为1.2em */
right: -1px; /* 设置右边距为-1px */
top: -0.3em; /* 设置顶部边距为-0.3em */
visibility: hidden; /* 设置不可见 */
}
input[type="checkbox"]:checked::before {
/* 使用`visibility`而不是`display`以避免重新计算布局 */
visibility: visible; /* 当复选框被选中时设置可见 */
}
input[type="checkbox"]:disabled {
border-color: black; /* 当复选框被禁用时设置边框颜色为黑色 */
background: #ddd; /* 设置背景颜色为#ddd */
color: gray; /* 设置颜色为灰色 */
}:checked — 复选框（或单选按钮）处于选中状态 — 用户已单击/激活它。
:disabled — 复选框（或单选按钮）处于禁用状态 — 无法与之交互。
样式化的单选按钮：自定义单选按钮样式。
切换开关示例：样式类似于切换开关的复选框。
如果您在不支持 appearance 的浏览器中查看这些复选框，您的自定义设计将丢失，但它们仍将看起来像复选框并且可用。
7.2 对于“丑陋”"ugly"元素，我们能做些什么？
“丑陋”的控件 - 那些很难彻底设置样式的控件
简而言之，这些是下拉框、复杂的控件类型（如 和 ）以及面向反馈的控件（如 color
以以下示例为例，该示例显示了运行中的许多“丑陋”表单功能：
body {
font-family: "Josefin Sans", sans-serif; /* 设置字体为"Josefin Sans" */
margin: 20px auto; /* 设置顶部和底部边距为20px，并使body水平居中 */
max-width: 400px; /* 设置body的最大宽度为400px */
}
form > div {
margin-bottom: 20px; /* 设置form的直接子div元素的底部边距为20px */
}
select {
appearance: none; /* 移除默认外观 */
width: 100%; /* 设置宽度为100% */
height: 100%; /* 设置高度为100% */
}
.select-wrapper {
position: relative; /* 设置相对定位 */
}
.select-wrapper::after {
content: "▼"; /* 设置内容为"▼" */
font-size: 1rem; /* 设置字体大小为1rem */
top: 3px; /* 设置顶部边距为3px */
right: 10px; /* 设置右边距为10px */
position: absolute; /* 设置绝对定位 */
}
button,
label,
input,
select,
progress,
meter {
display: block; /* 设置display属性为block */
font-family: inherit; /* 继承父元素的字体 */
font-size: 100%; /* 设置字体大小为100% */
margin: 0; /* 设置边距为0 */
box-sizing: border-box; /* 设置盒模型为border-box */
width: 100%; /* 设置宽度为100% */
padding: 5px; /* 设置内边距为5px */
height: 30px; /* 设置高度为30px */
}
input[type="text"],
input[type="datetime-local"],
input[type="color"],
select {
box-shadow: inset 1px 1px 3px #ccc; /* 添加内阴影效果 */
border-radius: 5px; /* 添加圆角效果 */
}
label {
margin-bottom: 5px; /* 设置底部边距为5px */
}
button {
width: 60%; /* 设置宽度为60% */
margin: 0 auto; /* 水平居中按钮 */
}const fileInput = document.querySelector('#file'); // 获取文件输入元素
const fileList = document.querySelector('#file-list'); // 获取文件列表元素
fileInput.addEventListener('change', updateFileList); // 为文件输入元素添加change事件监听器
function updateFileList() {
while(fileList.firstChild) {
fileList.removeChild(fileList.firstChild); // 移除文件列表中的所有子元素
}
let curFiles = fileInput.files; // 获取当前选择的文件
if(!(curFiles.length === 0)) { // 如果选择了文件
for(let i = 0; i < curFiles.length; i++) { // 遍历选择的文件
const listItem = document.createElement('li'); // 创建列表项元素
listItem.textContent = 'File name: ' + curFiles[i].name + '; file size ' + returnFileSize(curFiles[i].size) + '.'; // 设置列表项文本内容
fileList.appendChild(listItem); // 将列表项添加到文件列表中
}
}
}
function returnFileSize(number) { // 定义函数，用于返回文件大小的字符串表示
if(number < 1024) {
return number + 'bytes'; // 如果小于1024字节，返回字节数
} else if(number >= 1024 && number < 1048576) {
return (number/1024).toFixed(1) + 'KB'; // 如果大于等于1024字节且小于1048576字节，返回KB数
} else if(number >= 1048576) {
return (number/1048576).toFixed(1) + 'MB'; // 如果大于等于1048576字节，返回MB数
}
}虽然在HTML表单中使用CSS仍然存在困难，但有一些方法可以解决许多问题。没有干净、通用的解决方案，但现代浏览器提供了新的可能性。目前，最好的解决方案是详细了解不同浏览器在应用于 HTML 表单控件时支持 CSS 的方式。
The End