freeCodeCamp 响应式网页设计的认证课程第四章。你可以使用 HTML 表单收集访问网页的用户的信息。在通过编写注册表单学习 HTML 表单的课程中,通过编写一个注册页学习 HTML 表单,学习如何控制人们在表单中可以输入的数据类型,以及使用一些新的 CSS 工具装饰你的页面。以下为我在学习和实战练习过程中所做的笔记,可供参考。
一、重点 HTML 代码
表格页面格式:
1 2 3 4 5 6 7 8
<body> <h1>Registration Form</h1> <p>Please fill out this form with the required information</p> <formaction='https://register-demo.freecodecamp.org'> <!--表格内容--> </form> <inputtype="submit"value="Submit" /> </body>
输入框:
1 2 3 4 5 6
<fieldset> <label>Enter Your First Name: <inputtype="text"name="first-name"required /></label> <label>Enter Your Last Name: <inputtype="text"name="last-name"required /></label> <label>Enter Your Email: <inputtype="email"name="email"required /></label> <label>Create a New Password: <inputtype="password"name="password"minlen="8"pattern="[a-z0-5]{8,}"required /></label> </fieldset>
单选&复选框:
1 2 3 4 5 6 7
<fieldset> <label><inputtype="radio"name="account-type"class="inline" /> Personal Account</label> <label><inputtype="radio"name="account-type"class="inline" /> Business Account</label> <label> <inputtype="checkbox"name="terms"class="inline"required /> I accept the <ahref="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a> </label> </fieldset>
文件、数字、下拉栏、文本框输入:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
<fieldset> <label>Upload a profile picture: <inputtype="file"name="file" /></label> <label>Input your age (years): <inputtype="number"name="age"min="13"max="120" /></label> <label>How did you hear about us? <selectname="referrer"> <optionvalue="">(select one)</option> <optionvalue="1">freeCodeCamp News</option> <optionvalue="2">freeCodeCamp YouTube Channel</option> <optionvalue="3">freeCodeCamp Forum</option> <optionvalue="4">Other</option> </select> </label> <label>Provide a bio: <textareaname="bio"rows="3"cols="30"placeholder="I like coding on the beach..."></textarea> </label> </fieldset>