input表单那些事儿

作者: 喵呜Yuri | 来源:发表于2018-01-05 16:17 被阅读6次

input表单那些事儿
HTML基础语法（下）
h5表单
Servlet处理表单数据
前端小知识点总结
第 4 章 jQuery 表单选择器
表单标签
如何用最原始的方法实现选项卡的效果（input）
jquery-表单选择器
Vue表单和v-model

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            padding:0;
            margin: 0;
        }
        input,select{
            border:1px solid green;
            outline:none;
        }
        *::-webkit-scrollbar {/*隐藏滚轮*/
            display: none;
        }
        /*placeholder字体颜色*/
       input::-webkit-input-placeholder{
            color: #177cb0;
        }
       input::-moz-placeholder{
            color: #177cb0;
        }
       input:-ms-input-placeholder{
            color: #177cb0;
        }
       /*背景自动填充问题*/
        input:-webkit-autofill {
            -webkit-text-fill-color: #eee !important;
            -webkit-box-shadow: 0 0 0 1000px rgba(0,0,0,0) inset !important;
            transition: background-color 5000s ease-in-out 0s;
        }
     /*input[type=number]不让出现*/
      input[type=number] {
        -moz-appearance:textfield;
      }
      input[type=number]::-webkit-inner-spin-button,
      input[type=number]::-webkit-outer-spin-button {
          -webkit-appearance: none;
          margin: 0;
      }
        .div{
            width:100px;
            height:100px;
            border:1px solid #333;
            background-color:pink;
        }
        .div.green{
            background-color: green!important;
        }
    </style>
</head>
<body>
<form id="myform" action="add">
    <input type="text" name="username">
    <input type="text"  name="tel" autocomplete="off">
    <select name="" id="">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
</form>
</body>
</html>

处理form字段：
js代码：

$('#myform').serialize();//username=Jack&tel=13883008967

$('#myform').serializeArray()

这里没有专门转化为json的方法，所以自己写一个

 function serializeOption(str) {
      var str1 = str.replace(/=/ig,'":"').replace(/&/ig,'","');
      var strJson = '{"'+str1+'"}';
      return JSON.parse(strJson);
    }
serializeOption($('#myform').serialize());//{“username”：“Jack”，“tel”：“13883008967}