这里主要讲解表单元素的组成和有关表单元素的js操作事件

一、表单元素的组成

1.form表单

①结构：

②属性：action 代表提交表单的地址

2.form表单相关的标签

①labe：...... 一般用于包裹文字
②input：输入框
1.特点:显示模式是行内块，不支持伪对象的使用
2.类型
2.1 text：文本框:只能输入一行文字，通过onuline：none 样式清除蓝色边框
2.2 number：数值，不具有普遍性，通过正则表达式限制输入
2.3 password：密码框
2.4 radio：单选框。单选框的属性：checked=""代表选框是否被选中，一般默认选中是选中的状态，通过设置相同的name属性值进行排他性，达到真正的单选


        男
        女

没有设置name值.gif

相同的name值.gif

2.5 checkbox：多选框
2.6 select-option：下拉框
下拉框中的属性：seleceted=""代表选框是否选中，一般默认下拉框选中
2.7 submit：提交
2.8 reset：重置
3.属性
3.1 placeholder:提示文字
3.2 autofocus：自动聚焦，需要写值，并且不能写两个autofacus

③ text边框操作

1. 进行操作前，要对边框进行重写或者清除。比如重写：border：1px solid red 或者清除：border：none
2. 边框修改颜色之前一定要先有边框
3. textarea边框操作：resize：禁止伸缩

④ 注意事项

1. input属于行内块，可以通过用p包裹进行换行
2. input中的id是唯一的，一个标签只能有一个id
3. 可以通过在for设置和input中id相同的名字进行连接，通俗的理解就是点击文字，可以聚焦到输入框


 用户名
 手机号
 密码

label和input没有设置相同name值.gif

label和input设置相同name值.gif

二、表单元素有关的js操作

1.控制表单元素

① 获取表单元素的值：获取标签.value
② 修改表单元素的是：获取表单.value='值'
③ 下拉框select-option的相关操作
1.追加元素： sel.options [ sel.options.length ]=new Option('内容','value值')
2.清空：sel.options.length=0;
3.获取索引值：sel.options.selectedIndex
4.获取value值：sel.options[ sel.options.selectedIndex ].value
5.获取HTML内容：sel.options[ sel.options.selectedIndex ].innerHTML

2.表单元素有关的事件

①聚集焦点: 获取标签.onfocus=function(){.......}
②失去焦点：获取标签.onblur=function(){........}
下面是综合性的例子，样式比较简单

表单简单案例.gif

最后祝大家学习愉快~

js入门系列（5）--表单元素