目 录CONTENT

文章目录

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

shibuyu
2022-11-17 / 0 评论 / 0 点赞 / 53 阅读 / 3,990 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-11-17,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

freeCodeCamp之form表单

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

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

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Registration Form</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Registration Form</h1>
    <p>Please fill out this form with the required information</p>
    <form method="post" action='https://register-demo.freecodecamp.org'>
      <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>
      <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>
      <fieldset>
        <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
        <label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
        <label for="referrer">How did you hear about us?
          <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>
        </label>
        <label for="bio">Provide a bio:
          <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
        </label>
      </fieldset>
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>

css

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

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

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

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

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

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

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

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

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

input[type="submit"] {
  display: block;
  width: 60%;
  margin: 1em auto;
  height: 2em;
  font-size: 1.1rem;
  background-color: #3b3b4f;
  border-color: white;
  min-width: 300px;
}

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

a{
  color:#dfdfe2
}

效果展示

form表单相关知识点

表单域

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

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

属性名 属性值 描述
action url 指定接收并处理表单数据的服务器程序的url地址
method get/post 用于设置提交表单数据的提交方式
name 自定义名称 规定表单的名称

表单控件

标签

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 元素的相同。

0

评论区