label 与 input

label 是相当于 input 的备注 。它的效果是点击该标签的时候，浏览器会自动将焦点转到和标签相关的表单控件上。
label for 属性 需要与 input 的 id 属性保持一致。

  1. <label for="name">Name</label>
  2. <input id="name" type="text">


radio 单选框 ： input 中 只要name属性的值是一样的，就允许多个选项中选择其中一个。

  1. <label>
  2.     Male <input type="radio" name="sex" id="male" value="male">
  3. </label>
  4. <br />
  5. <label>
  6.     Female <input type="radio" name="sex" id="female" value="female">
  7. </label>

checkbox 多选框 ：

  1. <p>
  2.   <input type="checkbox" id="cbox1" value="first_checkbox">
  3.   <label for="cbox1">html</label>
  4. </p>
  5. <p>
  6.   <input type="checkbox" id="cbox2" value="second_checkbox" checked="checked">
  7.   <label for="cbox2">css</label>
  8. </p>

input 框去除样式

1.去除 聚焦框之后 蓝色的边框

  1. input{
  2.     outline:none;
  3. }
  5. or
  7. input:focus{
  8.     outline:none;
  9. }

2.去除所有的外边框

  1. input{  
  2.     background:none;  
  3.     outline:none;  
  4.     border:0px;
  5. }

在手机上搜索键盘上显示 搜索 

  1. <div class="search-input-wrap clearfix">
  2.     <div class="form-input-wrap f-l">
  3.         <form action="" class="input-kw-form">
  4.             <input type="search" autocomplete="off" name="baike-search" placeholder="请输入关键词" class="input-kw">
  5.         </form>
  6.         <i class="iconfont if-message"></i>
  7.         <i class="iconfont if-close"></i>
  8.     </div>
  9.     <i class="search-cancel f-l">取消</i>
  10. </div>

button 去除默认样式

  1. border:none;

搜索框布局 

  1. input{
  2.             outline: none;
  3.             border: 0;
  4.             background:none; 
  5.             width: 220px;
  6.             padding: 10px;
  7.             border: 1px solid red;
  8.         }
  9.         .form{
  10.             box-sizing: border-box;
  11.             display: flex;
  12.             width: 270px;
  13.         }
  14.         button{
  15.             width: 50px;
  16.             border: 0;
  17.             background-color: red;
  18.         }
  21. <div class="form">
  22.             <input id="search" placeholder="请输入内容" type="searchbox">
  23.         <button>搜索</button>
  24.     </div>

form 表单的 使用
https://segmentfault.com/

textarea

取消chrome下input和textarea的聚焦边框：

  1. input,button,select,textarea{outline:none}

取消chrome下textarea可拖动放大：

  1. textarea{resize:none}

重置样式

  1. input,button,select,textarea{outline:none}
  2. textarea{resize:none}

修改outline颜色以及样式
获取光标时

  1.  textarea:focus {
  2.     outline: 1px solid #6FA1D9 !important;
  3.     box-shadow:0px 0px 5px #6FA1D9 !important;
  4. }

备注：resize:none 会让输入框右下角拖拉消失

href

默认没有填写值得时候事回到顶部 top
如果指定了 id 就可以根据 id 的值进行跳转

  2. <a href="javascript:void(0);">点我没有反应的!</a>
  3. <a href="#pos">点我定位到指定位置!</a>
  4. <br>
  5. ...
  6. <br>
  7. <p id="pos">尾部定位点</p>

location.assign

location.assign 与 location.href 是一样的,有产生历史记录,可以返回
location.replace 页面跳转后不可以后退

document.querySelectAll

  1. <div id="ele">ele</div>
  3. 查找 id  元素时
  4. let ele = document.querySelectorAll('#ele')[0]
  5. ele.style.background  = 'red'
  8. 查找 css 元素时
  9. <ul>
  10.   <li>The</li>
  11.   <li>test</li>
  12. </ul>
  13. <ul>
  14.   <li>has</li>
  15.   <li>passed</li>
  16. </ul>
  17. let node = document.querySelectorAll('ul')
  18. console.log(node) //NodeList(2) [ul, ul]

input 属性

  1. <input type="text">
  3. 去除默认样式 （点击输入框出现蓝色边框）
  4. <input type="text" style="outline:none">

常用属性：

属性 描述
readOnly 只读
value value属性的值

详细属性
image.png

方法：
blur() 失去焦点
focus() 获取焦点
select() 选取文本域中内容

  1. <body>
  2.     <input id="text" type="text" value="18" dir="" style="outline:none">
  3.     <button onclick="setFocus()">获取焦点</button>
  4.     <script>
  5.         var section = document.querySelectorAll("input")[0]
  6.         console.log(section)
  8.         function setFocus(){
  9.             document.getElementById("text").select()
  10.         }
  12.     </script>
  13. </body>

场景： input 框 是单选框时，如何取里面的值
直接绑定点击事件就可以了

insertAdjacentHTML

将指定的文本解析为Element元素，并将结果节点插入到DOM树中的指定位置，它不会重新解析它正在使用的元素，因此它不会破坏元素内的现有元素。

语法：

  1. element.insertAdjacentHTML(position, text);
  3. position一个 DOMString，表示插入内容相对于元素的位置，并且必须是以下字符串之一：
  4. • 'beforebegin'：元素自身的前面。
  5. • 'afterbegin'：插入元素内部的第一个子节点之前。
  6. • 'beforeend'：插入元素内部的最后一个子节点之后。
  7. • 'afterend'：元素自身的后面。
  8. text是要被解析为HTML或XML元素，并插入到DOM树中的 DOMString

click

click()方法用于在单选按钮上模拟一次鼠标点击

  1. radioObject.click()

button

  • **autofocus****
    • 一个布尔属性，用于指定当页面加载时按钮必须有输入焦点，除非用户重写，例如通过不同控件键入。只有一个表单关联元素可以指定该属性。
    • autofocus 属性为 true 时，页面加载时自动聚焦到此控件
    • 支持 autofocus 属性的标签有 input、textarea、button

应用场景： 谷歌、百度等搜索页面，页面一旦加载，光标就定位在输入框里

  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>autofocus的使用</title>
  7.     </head>
  8.     <body>
  9.         <div align="center">文本内容回居中显示，因为元素上面的设置了</div>
  10.         <div class="div">我是一个很高的地址</div>
  11.         <button autofocus>我有自动聚集功能，加载到这里</button>
  12.         <style>
  13.             .div {
  14.                 height: 2000px;
  15.             }
  16.             div {
  17.                 border: 1px red solid;
  18.             }
  19.         </style>
  20.     </body>
  21. </html>

button的类型。可选值

  • submit: 此按钮将表单数据提交给服务器。如果未指定属性，或者属性动态更改为空值或无效值，则此值为默认值。
  • reset: 此按钮重置所有组件为初始值。
  • button: 此按钮没有默认行为。它可以有与元素事件相关的客户端脚本，当事件出现时可触发。
  • menu: 此按钮打开一个由指定元素进行定义的弹出菜单。

总结：除了IE浏览器外，如果 button 没有设置type属性，默认值为 type=”submit”，会进行跳转页面和提交数据的操作，假如我们不想使用默认的操作，必须设置成 type=”button”.IE浏览器button默认type是button