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中使用管道（'|'）的使用也可以忽略此錯誤。