placeholder是指当文本框input="text" 或textarea 处于未输入状态时显示的输入提示。
<body>
<script type="text/javascript">function setValue(){
var label=document.getElementById("label");
var textbox=label.control;
textbox.value="213001";
}
</script>
<form>
<label id="label">
邮编:
<input id="txt_zip" maxlength="6" placeholder="请输入内容">
<small>请输入六位数字</small>
</label>
<input type="button" value="设置默认值" οnclick="setValue()"/>
</form>
</body>
label标签为input元素定义标注(标记)。
label元素不会向用户呈现任何特殊效果,不过,它为鼠标用户改进了可用性。如果您在label元素内点击文本,
就会触发次控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
label标签的for属性应当与相关元素ID属性相同。
<body>
<form action="demo_form.html">
Username:<input type="text" name="usrname" requirde>
<input type="submit">
</form>
<form action="demo_form.asp">
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male"><br/>
<label for="female">Female</label>
<input type="raido" name="sex" id="female" value="female"><br/>
<input type="submit" value="提交">
</form>
</body>
<!--该内容是一篇关于苹果的文章,该文章分了3段,每一段都有一个独立的标题, 因此
使用了两个section元素。请记住,对文章分段的工作也是使用scetion元素完成的。
可能有人会问,为什么没有对第一段使用section元素,这里其实是可以使用section
元素的, 但是由于其结构比较清晰,分析器可以识别第一段内容在一个section元素里,
所以也可以将第一个section元素略,但是如何第一个section元素里还要包含section
元素或者article元素,那么就必须写明第一个section元素了。
-->
<body>
<article>
<h1>苹果</h1>
<p><b>苹果</b>,植物类水果,多次花果...</p>
<section>
<h2>红富士</h2>
<p>红富士是从普通富士的芽(枝)变中选育出的找色系富的统称..</p>
</section>
<section>
<h2>国光</h2>
<p>国光苹果品,又名小国光、万寿。原产美国,1600年发现的偶然实在苗...</p>
</section>
</article>
<!--看到这里,你可能又会糊涂了,这两个元素可以互换使用吗?他们的区别到底是什么呢?事实上,
在html5中,article元素可以看成是一种特殊种类的section元素,它比section元素更强调
独立性。即section元素强调分段或者分块,而article强调独立性。具体来说,如果一块内容
相对来说比较独立、完整的时候,应该使用article元素,但是如果你想将一块内容分成几段的时候,
应该使用section元素。另外,在html5中,div元素变成一种容器,当使用CSS样式的时候,可以对
这个容器进行一个总体的css样式的套用。另外,补充一点,在html5中,你可以将所有页面的从属部分,
譬如导航条,菜单,版权说明等包含在一个统一的页面中,以便统一使用CSS样式来进行装饰。最后,关于
section元素的使用禁忌总结如下:
1,不要将 section元素用作设置样式的页面容器,那是div元素的工作
2,如果article元素,aside元素或nav元素更符合使用条件,不要使用section元素。
3,不要为没有标题的内容区块使用section元素-->
<section>
<h1>水果</h1>
<article>
<h2>苹果</h2>
<p>苹果,植物类水果,多次花果...</p>
</article>
<article>
<h2>橘子</h2>
<p>橘子,是荟香料柑橘属的一种水果...</p>
</article>
<h2>香蕉</h2>
<p>香蕉,属于芭蕉料芭蕉属植物,又指其果实</p>
</section>
</body>
在html5中,为单行文本框input type="text" 增加了一个list属性,该属性的值为某个datalist元素的ID
.datalist元素也是html5中新增的元素,该元素似于选择框(select元素),但是当用户想要设定的值不在
选择列表之内时,允许自动输入。datalist元素本身并不显示,而是当文本框获得焦点时以提示输入的方式显示。
为了避免在没有支持该元素的浏览器上出现显示错误,可以用CSS等将它设定为不显示。如下图片是显示效果
<body>
text:<input type="text" name="greeting" list="greetings" placeholder="请输入内容">
<!--使用style=”display:none;“将datalist元素设定为不显示-->
<datalist id="greetings" style="display:none;">
<option value="Good Morning">Good Morning</option>
<option value="Hello">Hello</option>
<option value="Good Afternoon">Good Afrernoon</option>
</datalist>
</body>
在html5中,对input元素使用pattern属性,并且将属性值设置为某个格式的正则表达式,
在提交时会对这些进行检查, 检查其内容是否符合给定格式。当输入的内容不符合给定格式时,
则不允许提交,同时在浏览器中显示信息提示文字,提示输入的内容必须符合给定格式。譬如
下面代码所示,要求输入内容为一个数字与三个大写字母。
<body>
<form>
请输入指定格式的内容: <input pattern="[0-9][A-Z]{3}" name="part">
<input type="submit">
</form>
</body>