04 列表和表单

Posted 2020-12-15 wzos

1. 列表标签

去掉列表默认的样式：li { list-style: none; }

1.1 有 / 无序列表

标签名	定义	说明
<ul></ul>	无序标签	没有顺序，里面只能包含li
<ol></ol>	有序标签	有顺序，里面只能包含li

---

1.2 自定义列表

适用于对术语或名词进行解释和描述（通常用作网站底部竖排链接）

<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
  ...
  <dt>名词2</dt>
  <dd>名词2解释1</dd>
  <dd>名词2解释2</dd>
  ...
</dl>

---

2. 表单标签

一个完整的表单通常由表单控件（也称为表单元素）、提示信息、表单域3个部分构成

2.1 input 控件

输入的控件，根据不同的属性值用来指定输入的功能

语法：<input type="text" />

• type 属性（表单类型）

属性值	描述
text（默认）	单行文本输入框
password	密码输入框
radio	单选按钮（设相同name）
checkbox	复选按钮
button	普通按钮
submit	提交按钮
reset	重置按钮
file	上传文件按钮
image	图像形式的按钮（要有src）

• 其他属性

属性	属性值	描述
name	自定义	定义控件的名称，用于区别不同的表单
value	自定义	表单里默认显示的文本
size	正整数	控件显示的宽度
checked	checked	设置默认选中的项（作用于单复选按钮）
maxlength	正整数	控件允许输入的最多字符数

---

2.2 label 标签

用于绑定表单和元素，当点击文字的时候，光标会定位到指定的表单里面

方式一：用 label 包含 input 控件

<label>用户名：<input type="text"></label>

方式二：label 用 for 属性绑定 input 控件的 id

<label for="sex">男</label>
<input type="radio" id="sex">

---

2.3 textarea 控件

可以输入多行文本的输入框

语法：<textarea >文本内容</textarea>

属性：cols="每行中的字符数" rows="显示的行数"（不常用）

---

2.4 select 控件

多个选项让用户选择的下拉列表

<select>
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option>
  ...
</select>

option 属性：selected="selected" 当前项为默认选中项

---

3. form表单域

通过form表单域收集表单控件的信息传递给服务器

<form action="url地址" method="提交方式" name="表单名称">
  各种表单控件
</form>

属性	属性值	作用
action	url 地址	指定接收并处理表单数据的服务器程序的url地址
method	get / post	设置表单数据取值的提交方式
name	控件的名称	用于指定表单的名称，以区分同一个页面中的多个表单

---