4_控制表单.html 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. </head>
  8. <body>
  9. <input type="text" id="inp1">
  10. <button id="btn">按钮</button>
  11. <select id="school">
  12. <option value="heida">黑龙江大学</option>
  13. <option value="jiada">佳木斯大学</option>
  14. <option value="hgc">黑工程</option>
  15. </select>
  16. <input type="checkbox" id="ck1">
  17. <!-- label 标签 用于绑定表单元素 for属性用于绑定表单元素的id -->
  18. <label for="ck1">同意</label>
  19. <script>
  20. var oInp = document.getElementById("inp1");
  21. var oBtn = document.getElementById("btn");
  22. var oSchool = document.getElementById("school");
  23. var oCk1 = document.getElementById("ck1");
  24. oBtn.onclick = function(){
  25. // 获取文本框中的内容
  26. // var val = oInp.value;
  27. // console.log(val);
  28. // 给文本框赋值
  29. // oInp.value = "123";
  30. }
  31. // 表单事件
  32. // 表单输入事件
  33. oInp.oninput = function(){
  34. console.log(this.value);
  35. }
  36. // 表单失去焦点事件
  37. oInp.onblur = function(){
  38. console.log("失去焦点");
  39. }
  40. // 表单获得焦点事件
  41. oInp.onfocus = function(){
  42. console.log("获得焦点");
  43. }
  44. // 下拉列表事件
  45. // 下拉列表改变事件
  46. oSchool.onchange = function(){
  47. console.log(this.value);
  48. }
  49. // 复选框事件
  50. // 复选框改变事件
  51. oCk1.onchange = function(){
  52. console.log(this.checked);
  53. }
  54. </script>
  55. </body>
  56. </html>