列表和表单

1、列表标签

列表概念容器里面装载着结构，样式一致的文字或图表的一种形式，叫列表
特点列表最大的特点就是整齐、整洁、有序、跟表格类似，但是自由组合度高

1.1 无序列表ul

无序列表的各个列表项之间没有顺序级之分，是并列的。
语法格式

   <ul>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
        <li>列表项4</li>
    </ul>

1.2 有序列表ol

有序列表即为有排列顺序的

  <ol>
        <li>一天</li>
        <li>两天</li>
        <li>按天</li>
        <li>四天</li>
  </ol>

1.3 自定义列表

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

2、表单标签

作用：收集用户资料
完整的表单由三部分组成：表单控件（也称为表单元素）、提示信息、表单域

2.1 input控件

语法：

 <input  type="属性值" value="你好"/>

属性	属性值	描述
type	text	单行文本输入框
type	password	密码输入框
type	radio	单选按钮
type	checkbox	复选框
type	button	普通按钮
type	submit	提交按钮
type	reset	重置按钮
type	image	图像形式的提交按钮
type	file	文件域
name	由用户自定义	控件的名称
value	由用户自定义	input控件中的默认文本值
size	正整数	input控件在页面中的显示宽度
checked	checked	定义选择控件默认被选中的项
maxlength	正整数	控件允许输入的最多的字符数

（1）type类型

<!-- type text 是一个文本框 -->
   用户名: <input  type="text" /><br />
   密码:<input type="password"/>

<!-- 单选按钮用法，通过name属性相同控制单选 -->
   性别：<br/>
         男<input type="radio" name="sex"/> <br />
         女<input type="radio" name="sex"/> <br/>

<!-- 复选按钮，name属性相同 -->
    爱好：
        睡觉<input type="checkbox" name="hobby"/>
        爬山<input type="checkbox" name="hobby"/>
        游泳<input type="checkbox" name="hobby"/>
        跑步<input type="checkbox" name="hobby"/>

   <!-- 按钮 -->
        <!-- button按钮 -->
        <input type="button" value="获取验证码" >
        <!-- submit按钮 普通按钮需要写value值，submit有默认值-->
        <input type="submit" />
        <!-- reset按钮 -->
        <input type="reset" />
        <!-- 图片提交按钮，里面必须包含src属性 -->
        <input type="image" src="img/下载.jpg"  />
        <!-- 上传头像  文件域-->
        <input type="file" />

（2）value属性值

用户名: <input  type="text"  value="请输入用户名"/><br />

(3)name属性
作用：区别不同表单

   用户名: <input  type="text"  value="请输入用户名" name="username"><br />
   密码:<input type="password" value="请输入密码" name="userpassword" />

（4）checked属性
表示默认选中状态

男<input type="checkbox" name="sex" checked="checked" />

2.2 label标签

目标：label标签主要是为了提高用户体验
概念：label标签为input元素定义标注（标签）
作用：用于绑定一个表单元素，当点击label标签的时候，被绑定的表单元素就会获得输入焦点

方法一：用label直接包括input表单

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

方法二：for属性规定label与哪个表单元素绑定

<!-- for 和id来实现 -->
    <label for="nc"> 昵称：</label><input type="text" id="nc"/>

2.3textarea控件（文本域）

语法：

    用户留言：
    <textarea cols="每行中的字符数" rows="显示的行数">
        文本内容
    </textarea>

注意：
text表示一行，单标签
textarea文本域，可以显示多行，双标签

2.4 select下拉菜单

语法：

籍贯：
    <select>
        <option>--请选择省份--</option>
        <option>上海</option>
        <option>天津</option>
        <option>北京</option>
    </select>

注意：
1 <select>中至少包含一对option
2 在option中定义selected=“selected”时，当前项即默认选中项

 <option selected="selected" >上海</option>

2.5 form表单域

通过form表单域传递给服务器
语法：

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

常用属性：

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