freeCodeCamp之form表单

免费学习编程的网站 freeCodeCamp(🔥) - 官方版（英文）

通过编写注册表单学习 HTML 表单

效果展示

form表单相关知识点

表单域

<form method="post" action='https://register-demo.freecodecamp.org' name='message'>
</form>

标签：form，双标签，容器级，填写的表单信息可以提交到后台服务器
属性：

表单控件

标签

input，单标签，相当于一个特殊的文本

属性

name属性

元素的名称，也就是name的值代表当前input元素的名字；

value属性

对于不同的输入类型，value 属性的用法也不同：

• type=“button”, “reset”, “submit” - 定义按钮上的显示的文本
• type=“text”, “password”, “hidden” - 定义输入字段的初始值
• type=“checkbox”, “radio”, “image” - 定义与输入相关联的值
  注释：<input type="checkbox"> 和 <input type="radio"> 中必须设置 value 属性。
  注释：value 属性无法与 <input type="file"> 一同使用。

maxlength属性

定义input元素中可输入的最长字符数。

pattern 属性

pattern 属性规定用于验证 <input> 元素的值的正则表达式。
注意：pattern 属性适用于下面的 input 类型：text、search、url、tel、email 和 password。

<input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required />

checked属性

checked属性规定在页面加载时应该被预先选定的input元素，也可以在页面加载后，通过javascript进行设置
checked属性只能与type="radio"或type="checkbox"的input元素配合使用

disabled属性

disabled属性规定应该禁用input元素。被禁用的字段是不能修改的，也不可以使用tab按键切换到该字段，但可以选中或拷贝其文本

• 注意1：disabled属性无法与type="hidden"的input元素一起使用
• 注意2：对于IE7-浏览器必须设置为disabled=“disabled”，而不可以直接设置disabled，否则使用javascript控制时将失效

required 属性

如果没有填写必需字段就提交表单，会展示一个错误信息

type属性

text： 定义提供用户输入的当行文本的输入框，不能输入多行文字，常用value定义默认的输入文字

<input id="first-name" name="first-name" type="text" required />

password： 字符会被做掩码处理（显示星号或实心圆）

<input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required />

email: 类型只允许包含 @ 以及域名中包含 . 的电子邮件。 password 类型会屏蔽输入，如果网站没有启用 HTTPS 会警告。

<input id="email" name="email" type="email" required />

数字字段： 用于输入数字的字段，其中min允许的最小值，max为允许的最大值，value规定默认值，还有step可规定合法数字间隔。

<input id="age" type="number" name="age" min="13" max="120" >

radio： 提供用户点击选择的单选框

<input id="personal-account" type="radio" name="account-type" > 
<input id="business-account" type="radio" name="account-type" > 

若发现两组单选框都可以选择，故在设置单选框的时候要注意，同一组的单选框之间必须是互斥的关系。
解决方式：给同一组单选框设置相同的name属性

checkbox： 提供给用户点击选择的多选框，也就是可以在有限数量的选项中，选择多个，同一组复选框做好也设置相同的name属性

 <input id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" > 

submit： 提交按钮，将填写的数据提交到form指定的后台服务器中，并重置清空form中填写的信息
距离父级 form 元素最近的第一个 type 为 submit 的 input 元素会被当作提交按钮。

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

file: 文件上传，可以将本地文件上传给服务器、添加multiple属性，可选择多个文件

 <input id="profile-picture" type="file" name="file" >

 <input id="profile-picture" type="file" name="file" multiple='multiple'>

此外还有

普通按钮 type=“button”

 <input type="button" value="确认" name="bt" onClick="">

提交按钮不需要设置onclick参数，在单击提交按钮时可以向服务器发送表单数据，数据会发送到表单的action属性中指定的页面，value属性中的值为按钮上显示的文字。

重置按钮 type=“reset”：

<input type="reset" value="重置" name="reset"/>

重置按钮的作用是点击之后表单会刷新回到默认状态，在value属性中输入的值为按钮上显示的文本；

图像按钮 type=“image”

 <input type="image" src="图片URL" name="Yes" width="80" height="25" />
 <input type="image" src="图片URL" name="No" width="80" height="25" />

这个功能是将图片转为图片形式按钮，其中src是链接图片的路径，name为图片名称，width为图片宽度，height为图片高度，当按下图片按钮会以name中的值向服务器发送信息。

文本域：

textarea，双标签，可以输入多行文本区域

<textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>

• rows：行，属性值：数字，数字是几显示文本框显示的最大行数，超过行数会被隐藏，出现滚动条
• cols：列，属性值，数字，数字是几，表示每一行显示最大字节（一个汉字按2字节计算）
• placeholder 属性规定可描述输入字段预期值的简短的提示信息（比如：一个样本值或者预期格式的短描述）。

下拉菜单

select 提前设置一些选项，通过点击可以选择其中一项

select，选择，定义下拉标签的整体结构
option，选项，定义下拉菜单的每一项,可以多项

<select id="referrer" name="referrer">
            <option value="">(select one)</option>
            <option value="1">freeCodeCamp News</option>
            <option value="2">freeCodeCamp YouTube Channel</option>
            <option value="3">freeCodeCamp Forum</option>
            <option value="4">Other</option>
</select>

提交带有选择菜单的表单向服务端发送的信息 value 并不是预期的。 因此，每一个 option 需要指定一个 value 属性。 如果没有指定，向服务器默认提交的是 option 内的文本。

label标签

所有的表单元素都可以通过绑定其他内容去扩大触发点击范围，这时需要使用一个label标签。
作用：是帮表单元素定义标注（标记）。
绑定方法一：

• 给表单元素设置id属性
• 将需要绑定的其他内容用label标签包裹
• 给label标签设置for属性，属性值为之前设置的id值

 <input type="checkbox" name="hobby" id="swimming">
 <label for="swimming">游泳</label>

绑定方法二：

• 将绑定内容和表单元素写在一起，即label嵌套input标签

<label><input type="checkbox" name="hobby">游泳</label>

此处按照无障碍最佳实践，将 input 元素和 label 元素使用 for 属性联系起来。

<fieldset>
        <label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label>
        <label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
        <label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
        <label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
</fieldset>

表单美化

body

body {
  width: 100%;
  height: 100vh;
  margin: 0;
  background-color: #1b1b32;
  color: #f5f6f7;
  font-family: Tahoma;
  font-size: 16px;
}

width: 100%;
width : 100%在使用绝对定位的情况下，width 为设置了relation的盒子的宽度

height: 100vh;
vh是css中的一个相对长度单位，相对于视窗的高度, 视窗被均分为100单位的vh，即1vh永远等于当前视窗高度的百分之一。
因此，100vh就等于当前浏览器的视窗高度，即浏览器内部的可视区域的高度大小。
设置height:100vh，不论元素没有内容，该元素都会被撑开与屏幕高度一致

margin: 0;
设置对象上下间距为0，左右自动。此处是为了消除浏览器的默认样式

background-color: #1b1b32;
定义背景颜色

color: #f5f6f7;
定义字体颜色

font-family: Tahoma;
定义字体名称

font-size: 16px;
对应字体大小

h1, p

h1, p {
  margin: 1em auto;
  text-align: center;
}

给 h1 和 p 元素添加一个值为 1em auto 的 margin 属性使其居中显示。 同样也设置其文字 center 居中对齐显示。

em大小是根据父元素字体大小设置的。
body的默认font-size = 16px
对于它的子节点，所以此时，1em = 16px

form

form {
  width: 60vw;
  max-width: 500px;
  min-width: 300px;
  margin: 0 auto;
  padding-bottom: 2em;
}

vw：
相对于视口的宽度， 视口被均分为 100 单位的vw，1vw等于视口宽度的1%。

margin: 0 auto;
代表的的意思是水平居中

padding-bottom: 2em;
padding-bottom属性设置一个元素的底部填充

fieldset

fieldset {
  border: none;
  padding: 2rem 0;
  border-bottom: 3px solid #3b3b4f;
}

border: none;
把border设为“none”即没有，浏览器解析“none”时将不作出渲染动作，即不会消耗内存值。

padding: 2rem 0;
rem的大小是根据html根目录下的字体大小进行计算的。
fieldset的根节点是body的默认font-size = 16px
2rem = 16px*2=32px

border-bottom: 3px solid #3b3b4f;
CSS border-bottom 简写属性把下边框的所有属性设置到一个声明中。可以按顺序设置如下属性：border-bottom-width、border-bottom-style、border-bottom-color。

fieldset:last-of-type

fieldset:last-of-type {
  border-bottom: none;
}

最后一个 fieldset 元素的边框看起来有点不合适。 你可以使用 last-of-type CSS 伪类选择特定类型的最后一个元素

label

label {
  display: block;
  margin: 0.5rem 0;
}

display: block;
元素显示为块级元素

input,textarea,select

input,
textarea,
select {
  margin: 10px 0 0 0;
  width: 100%;
  min-height: 2em;
}

注意这里 width: 100%;
使其宽度填满父级元素的宽度,则把 label 文本挤到了表单元素的上方

input, textarea

input, textarea {
  background-color: #0a0a23;
  border: 1px solid #0a0a23;
  color: #ffffff;
}

设置 input 和 textarea 元素的 background-color 为 #0a0a23，使其更好地融入背景

.inline

      <fieldset>
        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" /> Personal Account</label>
        <label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business Account</label>
        <label for="terms-and-conditions" name="terms-and-conditions">
          <input id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" class="inline" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
        </label>
      </fieldset>

.inline {
  width: unset;
  margin: 0 0.5em 0 0;
  vertical-align: middle;
}

只选择 .inline 元素，并设置其 width 为unset。 这会清除之前设置的 input 元素的 width: 100% 规则。
此时.inline 元素在同行里过于高了。
设置其 vertical-align 属性为 middle 来修复这一点。

属性选择器

input[type="file"] {
  padding: 1px 2px;
}

为 type 为 file 的 input 设置样式，使它的 padding 与另一个 input 元素的相同。