registration form

在线注册表格

该项目是Teamhouse前端开发课程的第三个项目。

在此项目中，您将使用各种HTML表单输入类型和属性来构建响应迅速的移动友好式注册表格。使用提供的模型文件，您将使用媒体查询构建表单的移动和桌面版本，并采用“移动优先”方法。

该项目的实时链接可以在此处找到

截屏

指示

1. 使用移动第一设计构建布局：

• 确保HTML文件包含文档头部中的视口元标记，请参阅配置视口，以了解为什么以及如何添加此标签。
• 查看提供的模型（Mobile-form.png），然后在您的index.html文件中添加相同的内容。

2. 创建形式结构：仅使用一个<form>标签。 <form>标签应包含所有表单元素。为以下各节添加一个fieldset和legend ：

• 页面的“联系信息”部分，
• 页面的“新闻通讯”部分

3. 确保您包括以下表单字段类型：

• 文本输入
• 电子邮件输入
• 电话输入
• 选择菜单
• 复选框
• 无线电按钮
• Textarea
• 提交按钮

4. 表单字段应包括以下属性：

• input ：应包括id ， type和name属性。
• select和textarea ：应包括id和name属性。

5. 使用HTML <label>标签将标签添加到每个形式元素。标签内的文字应匹配样机中表单字段的名称。

• 确保通过for属性正确将每个<label>元素与其相应的表单控件配对。有关示例，请参见上面的链接。而且不要忘记文本元素。那也需要功能功能的标签。

6. 使用输入字段的placeholder属性将“必需”文本添加到：

• 全名字段
• 电子邮件地址字段

7. 完成移动布局的所有内容后，请使用媒体查询添加断点来调整更宽的平板电脑和桌面屏幕的布局。

• 匹配设计，因为它应该使用桌面形式的模型在768px宽的平板电脑或台式机上进行匹配。
• 通过使用CSS中的min-width属性编写媒体查询来使用移动优先的方法。

8. 一旦所有断点到位，请仔细检查您的布局匹配两个模型。

• 检查标签文本位置是否匹配两个模型：
  • 手机：文本应在表单字段上方。
  • 桌面：文字应位于表单字段的左侧。

9. 使用Google字体作为文本

10. 添加:focus用户单击或选项卡何时进入文本字段的表单。

11. 确保通过通过HTML和CSS验证器运行它来检查您的代码是否有效。

• 可以在项目资源中找到指向验证器的链接。这将帮助您发现代码中可能出现的任何错误。
• 有一些例外，您无需修复：
  • 不用担心任何警告，我们只需要您检查可能存在的任何错误即可。
  • 如果CSS验证器标志使用CALC，则应忽略CARC的使用，供应商前缀或伪元素/伪级。
  • 如果HTML验证器标志在Google字体链接/URL中使用管道（'|'）的使用也可以忽略此错误。