4 列表和表单

1. 列表标签（重点）
   1. 无序列表 ul li （重点）

• <ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的
• <li>与</li>之间相当于一个容器，可以容纳所有元素。
• 无序列表会带有自己的样式属性，放下那个样式，一会儿让CSS来！

• 1. 有序列表 ol li （了解）
  2. 自定义列表 dl dt dd (理解)

自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项钱没有任何项目符号。

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

 

地区： <dl> <dt>北京</dt> <dd>昌平区</dd> <dd>海淀区</dd> <dd>大兴区</dd> <dd>东城区</dd> …… <dt>山东省</dt> <dd>济南</dd> <dd>青岛</dd> …… </dl>

 

 

 

 

1. 表单标签（掌握）

表单的目的是为了收集用户信息。

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

 

 

• 1. input控件

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

常用属性：https://www.w3school.com.cn/tags/tag_input.asp

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

 

• • 1. name属性

<input type="radio" name="sex" value="男">男 <input type="radio" name="sex" value="女">女 当我们学ajax和后台的时候，name属性是必须的

• • 1. checked属性

表示默认选中状态。常见于单选按钮和复选按钮

<input type="radio" name="sex" value="男" checked="checked">男 <input type="radio" name="sex" value="女">女

 

• 1. label标签

label标签为input元素定义标注（标签）。

作用：

用于绑定一个表单元素，当点击label标签的时候，被绑定的表单元素就会获得输入焦点。

如何绑定元素呢？

1. 第一种用法 就是用label直接包括input表单。适合单个表单选择

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

 

1. 第二种用法 for和id属性规定label与哪个表单元素绑定。

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

 

• 1. 文本域 textarea

<textarea cols="每行中的字符数" rows="显示的行数"> 文本内容 </textarea> 作用：通过textarea控件可以轻松的创建多行文本输入框

 

文本框和文本域的区别：

表单	名称	区别	默认值显示	使用场景
input type="text"	文本框	只能显示一行文本	单标签，通过value显示默认值	用户名、昵称、密码等
textarea	文本域	可以显示多行文本	双标签，默认值写到标签中间	留言板

 

1. select下拉列表

 

 

语法： <select> <option>选项一</option> <option>选项二</option> <option>选项三</option> …… </select>

 

籍贯： <!--省份选择 select="selected" 表示默认选中 北京--> <select name="province" id="province"> <option value="">--请选择省份--</option> <option value="北京" selected="selected">北京</option> <option value="天津">天津</option> <option value="上海">上海</option> <option value="山东">山东</option> </select> <!--城市选择--> <select name="city" id="city"> <option value="">--请选择城市--</option> <option value="海淀区">海淀区</option> <option value="昌平区">昌平区</option> <option value="通州区">通州区</option> <option value="雄安区">雄安区</option> </select>

 

 

注意：

• <select>中至少包含一对option
• 在option中定义select=“selected”时，当前项即为默认选中项
• 但是我们实际开发中很少用select标签，因为样式不好修改，常用div+li模拟显示select

1. form表单域

收集的用户信息怎么传递给服务器?通过form表单域

目的：在HTML中，form标签被用于定义表单域，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。

 

语法：

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

 

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

注意：

每个表单都应该有自己表单域。我们现在做页面，不写看不到效果，但是，如果后面学ajax后台交互的时候，必须需要form表单域。

1. 团队约定
   1. 元素属性
      1. 元素属性值使用双引号语法
      2. 元素属性值可以写上的都写上

推荐：

<input type="text"/> <input type="radio" name="sex" checked="checked"/>

 

不推荐：

<input type=text/> <input type='text'/> <input type="radio" name="sex" checked />

 

1. 综合案例

 

 

 

 

<table width="600" align="center" cellpadding="0" cellspacing="0" border="0"> <caption><h2>报名表</h2></caption> <tr> <td><label for="username">姓名：</label></td> <td><input type="text" name="username" id="username"></td> </tr> <tr> <td><label for="male">性别：</label></td> <td> <input type="radio" name="sex" id="male">男 <input type="radio" name="sex" id="female" checked="checked">女 </td> </tr> <tr> <td><label for="year">生日：</label></td> <td> <select name="year" id="year"> <option value="">--请选择年--</option> <option value="">2011</option> <option value="">2012</option> <option value="">2013</option> <option value="">2014</option> <option value="">2015</option> <option value="">2016</option> </select> <select name="month" id="month"> <option value="">--请选择月--</option> <option value="">1</option> <option value="">2</option> <option value="">3</option> <option value="">4</option> <option value="">5</option> <option value="">6</option> <option value="">7</option> <option value="">8</option> <option value="">9</option> <option value="">10</option> <option value="">11</option> <option value="">12</option> </select> <select name="day" id="day"> <option value="">--请选择日--</option> <option value="">1</option> <option value="">2</option> <option value="">3</option> <option value="">4</option> <option value="">5</option> <option value="">6</option> <option value="">7</option> <option value="">8</option> <option value="">9</option> <option value="">10</option> <option value="">11</option> <option value="">12</option> <option value="">30</option> </select> </td> </tr> <tr> <td><label for="address">所在地区：</label></td> <td><input type="text" name="address" id="address"></td> </tr> <tr> <td>婚姻状况：</td> <td> <input type="radio" name="marriage"> 未婚 <input type="radio" name="marriage"> 已婚 <input type="radio" name="marriage"> 丧偶 </td> </tr> <tr> <td>学历：</td> <td><input type="text" value="小学"></td> </tr> <tr> <td>月薪：</td> <td><input type="text" value="5000-6000"></td> </tr> <tr> <td>手机号：</td> <td><input type="text" value=""></td> </tr> <tr> <td>昵称：</td> <td><input type="text" value=""></td> </tr> <tr> <td>喜欢的类型：</td> <td> <input type="checkbox" name="type"> 妩媚 <input type="checkbox" name="type"> 柔美 <input type="checkbox" name="type"> 可爱 <input type="checkbox" name="type"> 小鲜肉 <input type="checkbox" name="type"> 型男 <input type="checkbox" name="type"> 气质 </td> </tr> <tr> <td>自我介绍：</td> <td> <textarea name="introduction" id="" cols="30" rows="10"></textarea> </td> </tr> <tr> <td></td> <td> <input type="submit" value="免费注册"> </td> </tr> <tr> <td></td> <td> <input type="checkbox" name="rule" checked="checked">我同意注册条款和会员加入标准 </td> </tr> <tr> <td></td> <td> <a href="#">我是会员，立即登录</a> </td> </tr> <tr> <td></td> <td> <h3>我承诺</h3> <ul> <li>年满18岁</li> <li>抱着严肃的态度</li> <li>真诚寻找另一半</li> </ul> </td> </tr> </table>

 

 

1. 查文档

经常查阅文档是一个非常好的学习习惯。

W3C： http://www.w3school.com.cn/

MDN: https://developer.mozilla.org/zh-CN/