webstorm h5简单表单事件以及表单案例总结（二）

 表单事件：

 

    用户：

    电话：

    

效果图：你输入的文本会触发事件，不论增加文本还是减少文本

                   

    用户：

    电话：

    

效果图：先输入6个s然后删除掉只剩一个

    用户：

    电话：

    

效果图:

进度条：

 效果图：

表单总结案例：

    
    
    
    



    

        
学生档案
        姓名：
        

        电话：
        

        邮箱地址：
        

        所属院校：
        

        

        入学成绩：
        

        基础水平：
        
        

        入学日期：
        
        毕业日期：
        

        

    

css样式：

*{
    padding: 0;
    margin: 0;
}
form{
    width: 600px;
    margin: 20px auto;
}
form > fieldset{
    padding: 10px;
}
form > fieldset > meter,
form > fieldset > input{
    width: 100%;
    height: 40px;
    line-height: 40px;
    margin: 10px 0;
    border: none;
/*先设置为无，再设置solid*/
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    padding-left:5px;
    /*width=内容+padding+border*/
    box-sizing: border-box;

}
form >fieldset >meter{
    padding-left: 0px;  //因为上面form > fieldset > input中设置了5px,所以这里重新设置一下
}

 

效果图 ：

 

学习于：https://xuexi.boxuegu.com/video.html?courseId=1044&moduleId=101478&type=PATH&phaseId=629    视频教学