今日课堂学习笔记04

今日的内容还是表单内容，但所涉及到的有HTML5对表单改进后的表单属性，HTML5改进的表单属性与之前版本的

的属性，有很明显的差别，不从功能上说，就从界面的表现上说，让人感到界面表现图形的美观，与以前的丑陋的

表单比起来，更有使用的欲望，而从功能上说，新表单属性的功能简单易懂的，没有什么复杂的理解！

以下就是今天的主要知识：

上传类型：

这个不是新出的表单属性，但需要在这个说说，因为这个表单属性是个很重要的表单属性，它是为了上传文件而存在的，

例子：

<input type="file" name="file" id="file" value="file">

界面效果：

如果有留意这个上传表单的人一定会发现怎么这个选择文件和未选择任何文件，修改不了的了，无论你在这个标签属性里怎么一顿修改，

都修改不了这些值，因为这个标签不允许修改，这个时候你只能迂回的达到你的修改目的，而我是这样修改的：

例子：

css的代码：

input[type='file']{
visibility: hidden;
position: absolute;
left: -100000px;
}

HTML+javascript的代码：

<input type="text" disabled>
<input type="image" src="./111.jpg" value="click" height="30">
<input type="file" name="file" id="file" value="file">
<script>
var oBtn=document.querySelector("input[type='image']");
var oFile=document.querySelector("input[type='file']");
var oText=document.querySelector("input[type='text']");
oBtn.onclick=function(){
oFile.click();
}
oFile.onchange=function(){
oText.disabled=false;
oText.value=this.value;
oText.disabled=true;
}
</script>

效果图：

 

这是我的一个简单的思路代码，虽然还有很多需要修改的地方，但都可以在这个思路的基础上修改；

首先是设置三个表单，一个被禁止掉的文本，一个图片按钮（其实什么按钮都可以），一个上传表单，

是设置上传表单的样式为隐藏，然后给个绝对定位让它飞出去，哈哈哈~，其实是让它脱离文本流，不

影响到布局，最重要的javascript代码来了，就是按钮的点击事件触发上传表单的点击，然后上传表单

的 onchange 事件，这事件是在用户改变输入域的内容时执行 JavaScript 代码，在这个事件函数里

放入去掉文本禁止到写入上传表单的上传内容（即value值）再到禁止文本，这是个逻辑，顺序不能乱来。

OK~，这就成功了。

 

 好了接下来进入新表单属性了：

以上的代码思路在下面的每个不同属性的标签input都能实现。所以才详细写出来，以下只会简单写一下。

type="color" 在兼容性上有问题，支持主流浏览器

type="color" 可以把这个属性隐藏掉，然后绝对定位飞出界面外。

然后使用一个button按钮控制它的变化，方法click（）；

js直接获取它的value值就可以获取到它的颜色值。

是一个十六进制的颜色值 如：#ffffff;

type="date" 带年月日的时间， 这个属性也一样可以从value值中获取到改变值。

type="number" 数字输入框 输入数字之类的可以使用 max  限制最大值  min  最小值  step  点击上下的一个跨度

type="range" 滑动条 可以使用max min step 限制最大值 最小值 还有点击上下的一个跨度

type="email" 邮件输入框 有简单的验证一个是否是邮件地址

type="week" 周

type="month" 月

type="search" 搜索框        与文本区别大不，但多了个删除标志

type="tel" 电话号码 兼容性很差 ， 不建议使用，目前主流浏览器都不怎么支持，只有支持谷歌。

type="datetime-local" 本地时间，带年月日时分的时间

type="url" URL的文本 有基本的验证

value值能设置，能获取，在js中。

autocomplete 自动完成允许浏览器预测对字段的输入

autocomplete 属性适用于 <form>，以及下面的 <input>

类型：text, search, url, telephone, email, password, datepickers, range 以及 color。

注意：

autocomplete所在标签要有name值才有这个功能。

 autofocus这个自动获取光标的属性。

以上的都是表单的新属性，界面和功能都可以省下不少javascript代码，还有可能不需要javascript代码。

 

最后补充个select标签：

select标签：列表选项

它可以使用optgroup标签在里面进行分类。

例子：

<select name="select" id="sel">
　　<optgroup label="fruit">
　　　　<option value="1">雪梨</option>
　　　　<option value="2">苹果</option>
　　　　<option value="3">香蕉</option>
　　</optgroup>
　　<optgroup label="food">
　　　　<option value="4">肉</option>
　　　　<option value="5">菜</option>
　　　　<option value="6">冰冻</option>
　　</optgroup>
</select>

效果图：

 

 select标签里的size和multiple组合使用，就是表达显示多个且多选；

 size=1显示一个，size=2就显示两个；

 

 

扩展知识：

替换元素与非替换元素

元素是文档结构的基础，在css里面，每个元素生成了包含内容的框（box）,大家都叫“盒子”。

但是不同的元素显示方式是不同的，有占据一整行的，有水平一个挨着一个的。比如：div 与span的方式不一样。

什么是替换元素与非替换元素

替换元素：

替换元素是浏览器根据其标签的元素与属性来判断显示具体的内容。

比如：<input /> type="text" 的是，这是一个文本输入框，换一个其他的时候，浏览器显示就不一样

HTML中的<img>、<input>、<textarea>、<select>都是替换元素，这些元素都没有实际的内容。

而替换元素通常都不是块级元素，可以在同一排显示多个替换元素，不同于块级元素独占一排，就只能显示一个块级元素。

非替换元素：

HTML 的大多数元素是不可替换元素，他们将内容直接告诉浏览器，将其显示出来。

比如<p>wanmei.com</p>

浏览器将把这段内容直接显示出来。

除了这两字，还有两种非常属性的元素，显示元素，他分为两种情况，一种是‘块及元素’ ‘block’，还有一种是“行内元素”inline，大家也叫“内联元素”。