列表和表单
1. 列表标签–用来布局
1.1 无序列表ul
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ul>
1.2 有序列表ol
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ol>
1.3 自定义列表dl
<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. 表单标签
- 表单控件:包含了具体的表单功能项,如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
- 提示信息: 一个表单中通常还需要包含一些说明性的文字,提示用户进行填写和操作。
- 表单域:他相当于一个容器,用来容纳所有的表单控件和提示信息,可以通过他定义处理表单数据所用程序的url地址,以及数据提交到服务器的方法。如果不定义表单域,表单中的数据就无法传送到后台服务器。
2.1 input控件
<input type="属性值" value="你好">
属性 | 描述 |
---|---|
type | text:单行文本输入框 password:密码输入框 redio:单选框 checkout:复选框 button:普通按钮 submit:提交按钮 reset:重置按钮 image:图像形式的提交按钮 file:文件域 |
name | 自定义控件名 |
value | input控件中的默认文本值 |
size | input控件在页面中的显示宽度 |
checked | 定义选择控件默认被选中的项 |
maxlength | 控件中允许输入的最大字符数 |
2.2 label标签
用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。
- 第一种用法就是用label直接包括input表单。 适合单个表单选择
<label> 用户名: <input type="radio" name="usename" value="请输入用户名"> </label>
- 第二种用法 for 属性规定 label 与哪个表单元素绑定。
<label for="sex">男</label>
<input type="radio" name="sex" id="sex">
2.3 textarea控件(文本域)
<textarea >
文本内容
</textarea>
属性:cols=“每行中的字符数” rows=“显示的行数”(一般我们写在css)
2.4 select下拉列表
<select>
<option selected = "selected">选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
在option 中定义selected =" selected "时,当前项即为默认选中项。
3. form表单域
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>