HTML基础2-优快云博客

本文详细介绍了HTML中的各种表单元素及其用法，包括输入框、单选按钮、复选按钮等，并通过实例展示了如何创建表单及设置相关属性。

2019独角兽企业重金招聘Python工程师标准>>>

无序列表：

<ul>
  <li>milk</li>
  <li>cheese</li>
</ul>

有序列表：

<ol>
  <li>Garfield</li>
  <li>Sylvester</li>
</ol>

输入框：

<input type="text" placeholder="cat photo URL"> // 带占位符的文本输入框

表单交互：

<form action="/submit-cat-photo"> //action参数表示将表单数据提交到哪个接口进行处理
  <input type="text" required placeholder="cat photo URL"> //required属性表示必填
  <button type="submit">Submit</button> //提交按钮
</form>

单选按钮：

单选就是你只能在多个选项中选择一个，就好比你有很多追求者，但却只能选择一个结婚。

多选一的场景就用radio button(单选按钮)

单选按钮只是input输入框的一种类型。

每一个单选按钮都应该嵌套在它自己的label(标签)元素中。

注意：所有关联的单选按钮应该使用相同的name属性。

<form action="/submit-cat-photo">
  <label><input type="radio" name="indoor-outdoor" checked> Indoor</label> //checked属性表示默认选中
  <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
  <button type="submit">Submit</button>
</form>

复选按钮：

当你在大学选课时，面对几百门课程，而因为时间和精力，你只能从中选择十几门。

这样的场景就用checkboxes（复选按钮）。

复选按钮是input的输入框的另一种类型。

每一个复选按钮都应该嵌套进label元素中。

所有关联的复选按钮应该具有相同的name属性。

<form action="/submit-cat-photo">
  <label><input type="checkbox" name="personality" checked> 必须</label> //checked属性表示默认选中
  <label><input type="checkbox" name="personality"> 统一</label>
  <label><input type="checkbox" name="personality"> 中国</label>
  <button type="submit">Submit</button>
</form>

转载于:https://my.oschina.net/u/2440318/blog/792864