HTML回顾之表单和列表

FORM  HTML 表单

• 表单是一个包含表单元素的区域。
• 表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
• 表单使用表单标签 <form> 来设置。

<form>

input 元素

</form>

如何在 HTML 中创建单选按钮？

<form action="">
<input type="radio" name="sex" value="man">男<br>
<input type="radio" name="sex" value="woman">女
</form>

如何在 HTML 页中创建复选框和单选框？

<form action="">
<input type="checkbox" name="hobby" value="Football">足球<br>
<input type="checkbox" name="hobby" value="Music">音乐
</form>

<form action="demo-form.php" method="get">
  <input type="radio" name="sex" value="man"> Man<br>
  <input type="radio" name="sex" value="woman" checked="checked">Woman<br>
  <input type="submit" value="提交">
</form>

如何在 HTML 页面中创建下拉列表框?

<form action="">
<select name="colors">
<option value="yellow">yellow</option>
<option value="red">red</option>
<option value="blue" selected>blue</option>
</select>
</form>

如何创建文本域?

<form action="">
First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="提交">
</form>

如何从表单发送电子邮件？

<form action="@qq.com" method="post" enctype="text/plain">
Name:<br>
<input type="text" name="name"><br>
E-mail:<br>
<input type="text" name="mail"><br>
Comment:<br>
<input type="text" name="comment"size="50"><br><br>
Password: <input type="password" name="pwd">

<input type="submit" value="发送">
<input type="reset" value="重置">
</form>

HTML 列表

有序、无序和定义列表

HTML 有序列表

<ol>
<li>AAA</li>
<li>BBB</li>
</ol>

HTML 无序列表

<ul>
<li>AAA</li>
<li>BBB</li>
</ul>

<ul>
  <li>AAA</li>
  <li>BBB
    <ul>
      <li>aaa</li>
      <li>aa
        <ul>
          <li>bbb</li>
          <li>bb</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>CCC</li>
</ul>

在 HTML 4中 ul 属性已废弃，HTML5 已不支持该属性，因此我们使用 CSS 代替来定义不同类型的无序列表

HTML 自定义列表

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>
<dt>AAA</dt>
<dd>aaa</dd>
<dt>BBB</dt>
<dd>bb</dd>
</dl>