html-form表单笔记

HTML5引入了很多更具描述性的HTML元素，例如：header、footer、nav、video、article、section等。

这些元素让HTML更易读，同时有助于搜索引擎优化和无障碍访问。

main元素让搜索引擎和开发者瞬间就能找到网页的主要内容。

表单form

input

• placeholder占位符是用户在input输入框中输入任何东西前的预定义文本。
• 把文本输入字段设置为必填项，添加属性required

<input type="text" placeholder="猫咪图片地址" required>

button

提交按钮：

<button type="submit">this button submits the form</button>

radio 单选

• 每一个单选按钮都应该嵌套在它自己的label（标签）元素中。
• 所有关联的单选按钮应该拥有相同的name属性。
• for属性和单选按钮id属性值相等，这样label元素和它的子元素单选按钮之间创建了一种链接关系。
• 添加checked属性，默认选中项

<label for="indoor">   
    <input id="indoor" type="radio" name="indoor-outdoor" checked>Indoor 
</label>

checkbox 复选

同radio

<label for="loving">
    <input id="loving" type="checkbox" name="personality" checked> Loving
</label>

<form action="/submit-cat-photo">
    <label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor">室内</label>
    <label for="outdoor"><input  id="outdoor" type="radio" name="indoor-outdoor">室外</label><br>
    <label for="loving"><input  id="loving" type="checkbox" name="personality">忠诚</label>
    <label for="loving"><input  id="loving"t type="checkbox" name="personality">懒惰</label>
    <label for="loving"><input  id="loving" type="checkbox" name="personality">积极</label><br>
    <input type="text" placeholder="猫咪图片地址" required>
    <button type="submit">提交</button>
</form>