今天主要的工作是任务7和小课堂，任务7样式还有一些问题，改完之后试一下ng-repeat的渲染，今天的日报主要整理和小课堂相关的部分。

今天小课堂的主要内容是，<input>表单的应用，还有在html5中新增的属性。

表单元素是允许用户在表单中(比如:文本域,下拉列表,单选框,复选框等等)输入信息的元素，最主要的作用就是收集信息。表单元素是页面中不可缺少的元素，在最新的H5中，表单元素也新增了一些属性，在页面构建中发挥了重要的作用。一般来说，表单包含如下几个部分：

1. 提示信息：表单中包含的说明性文字

2. 表单控件：包含了具体的表单功能项

3. 表单域：容纳所有表单控件和提示信息

常用的表单元素，包括：

1. <form> : 定义供用户输入的表单。

2. <fieldset> : 定义域。即输入区加有文字的边框。

3. <legend>：定义域的标题，即边框上的文字。

4. <label>：定义一个控制的标签。如输入框前的文字，用以关联用户的选择。

5. <input> : 定义输入域，常用。可设置type属性，从而具有不同功能。

6. <textarea> : 定义文本域(一个多行的输入控件)，默认可通过鼠标拖动调整大小。

7. <button> : 定义一个按钮。

8. <select> : 定义一个选择列表，即下拉列表。

9. <option>: 定义下拉列表中的选项。

接下来是对这些表单元素的具体分析。

<form name="" action="" method="get">……</form>

name : 表单名称；action : 用来指定表单处理程序的位置（url）；method : 定义表单结果从浏览器传送到服务器的方式，默认为"get"（也可以是post）

<input type="" name="" value="" size="">

name:控件名称；value:input控件默认文本值；size:input控件在页面中的显示宽度（必须是正整数）

input常用type属性如下：

1. text：单行文本输入框，可以通过正整数的size控制框长度。

2. password：密码输入框。

3. radio：单选按钮，同一组的单选按钮必须要有相同的name。

4. checkbox：复选框，同一组的单选按钮必须要有相同的name。

5. button：普通按钮。

6. submit：提交按钮，每出现一次，一个 Submit 对象就会被创建。

7. reset：重置按钮，会重置当前表单中全部的内容。

8. image：图像形式的提交按钮，写法是“<input type="image" src="……" alt="Submit">”。

9. hidden：隐藏域，隐藏字段对于用户是不可见的。

10. file：文件域，用于文件上传。

<select size="" multiple="multiple">
    <option hidden>选项1</option>
……
</select>

size：下拉菜单的可见选项数；multiple：多选。

在最新的html5中，有一些表单的新增属性，多用于js，如

datalist : 定义填写一个input时，提示几个option用于提示。可通过input的list特性与此元素作关联。

output : 表示计算的结果。可通过for特性与其它能够影响运算的元素（如input）作关联。

还有一些新增的type属性：

1. search：input会呈现为搜索框（与text类型的唯一区别在于当鼠标覆盖时尾部出现叉号可快速清除输入的内容）。

2. tel：编辑电话号码的控件，提交时换行符会自动从输入框中去掉。

3. url：编辑url的控件，提交时换行符与首位的空格都将自动去除。

4. email：可输入一个邮件地址。

5. color : 选择颜色的控件。

6. date : 选择年月日的控件。

此外，还有time、datetime、datetime-local、month、week、number、range类型。

<p>html5中input新增的一些较常用的特性：

1. list：关联datalist所用的该datalist的id（即datalistform外建立，通过list关联即可）。

2. pattern：一个正则表达式，用于检查控件的值，可作用于text、search、tel、url、email类型的input。

3. form：一个字符串(为关联的form表单的id)，用于表明该input属于哪个form表单（作用类似list）。

4. formmethod：表明使用GET还是POST，能覆盖form表单的method。仅在type为image或submit，且上面的form特性被设置的情况下才能使用。相似的有formtarget特性。

5. readonly：一个boolean值，表明该input值是否能被用户修改，可用于信息展示等页面。作用于type为hidden、range、color、checkbox、radio、file、button的input将被忽略。

6. maxlength：type为text、emal、search、password、tel或url（都为文本）时允许输入的最大字符个数。

7. autocomplete：浏览器是否根据之前提交的输入情况对此input自动填值（即以option形式匹配之前的输入值），取值on或off，默认on。如在登陆页面不想显示上一个登陆的用户名等时，可设置为off。

参考文献

1. html元素-表单元素及实用属性：http://blog.csdn.net/qq_19865749/article/details/52490882" target="_blank"

2. W3School HTML 表单 ： http://www.w3school.com.cn/html/html_forms.asp" target="_blank"

3. HTML5-input元素新特性 ：http://blog.csdn.net/garvisjack/article/details/63683201#Menu3-date

 1.怎么查找资料？

技术博客，专业书

2.怎么定位问题？

根据参考资料里面写的内容等，从外至内从上至下逐层梳理代码逻辑关系，断点调试

3.怎么解决问题？

逐层console或是修改样式，根据写的内容确定问题的最终原因并改进

4.怎么重构代码？

通过插件等精简编程流程，并拆分网页结构

5.怎么选择框架？

目前只会一点angularjs，没有了解过别的框架

6.怎么测试？

每完成一段代码块console一下