html表单元素学习笔记

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

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同。

动态输出，与表单相互关联

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>

扫描二维码关注公众号，回复： 3238995 查看本文章

试着拆分代码

<form>0
	<input type="range" id="a" value="50">100
	+<input type="number" id="b" value="50">
	=<output id="out" name="x"></output>
</form>

　　原生js，本来是超长的一句，排了一些换行

document.getElementsByTagName('form')[0]
　　.addEventListener(
　　　　'input', 
　　　　function(){
　　　　　　document.getElementById('out').value=
　　　　　　　　parseInt(document.getElementById('a').value)
　　　　　　　　　　+parseInt(document.getElementById('b').value);
　　　　}
　　)

jquery

$('form').bind('input', function (e) {
	$('#out').val(parseInt($('#a').val())+parseInt($('#b').val()));
});

output的是两个input相加

select标签内包含option标签，显示下拉式的选择框

form标签action属性表示元素做出响应的动作

textarea 文本域

可多段输入，就好像评论框一样

在标签内部写预定内容，有cols和rows属性

input标签的type属性表示输入类型

text: 输入单行文本

password: 输入后被圆点掩盖的文本

submit: 按钮，与form的action属性对应

radio: 单选按钮

checkbox: 复选框

html表单元素学习笔记

猜你喜欢