HTML原生手搓询盘

效果展示:

1、PC布局:

2、移动布局:

3、交互展示:

1、HTML代码

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="xunpan-box">
        <div class="xunpan-container">
            <div class="xunpan-title">
                <h2>contact us</h2>
                <h3>We are happy to answer your questions.</h3>
            </div>
            <div class="xunpan-form-box">
                <form id="xForm">
                    <!-- 左边 -->
                    <div class="xunpan-form-left">
                        <div class="row">
                            <label for="gender"><i style="color:red">*</i>  Gender</label>
                            <select id="gender" name="gender" required class="customizeInquiry">
                                <option value="" disabled selected>Please select your gender...</option>
                                <option value="male">Male</option>
                                <option value="female">Female</option>
                            </select>
                        </div>
                        <br><br>
                
                        <div class="row">
                            <label for="country"><i style="color:red">*</i>  Region</label>
                            <select id="country" name="country" required class="customizeInquiry">
                                <option value="" disabled selected>Please select your region...</option>
                                <!-- 世界上所有国家的选项 -->
                                <!-- <option value="" selected="selected">Bitte auswählen ...</option> -->
                                <option value="AF">Afghanistan</option><option value="EG">Ägypten</option><option value="AX">Ålandinseln</option><option value="AL">Albanien</option><option value="DZ">Algerien</option><option value="AS">Amerikanisch-Samoa</option><option value="VI">Amerikanische Jungferninseln</option><option value="UM">Amerikanische Überseeinseln</option><option value="AD">Andorra</option><option value="AO">Angola</option><option value="AI">Anguilla</option><option value="AQ">Antarktis</option><option value="AG">Antigua und Barbuda</option><option value="GQ">Äquatorialguinea</option><option value="AR">Argentinien</option><option value="AM">Armenien</option><option value="AW">Aruba</option><option value="AC">Ascension</option><option value="AZ">Aserbaidschan</option><option value="ET">Äthiopien</option><option value="AU">Australien</option><option value="BS">Bahamas</option><option value="BH">Bahrain</option><option value="BD">Bangladesch</option><option value="BB">Barbados</option><option value="BY">Belarus</option><option value="BE">Belgien</option><option value="BZ">Belize</option><option value="BJ">Benin</option><option value="BM">Bermuda</option><option value="BT">Bhutan</option><option value="BO">Bolivien</option><option value="BQ">Bonaire, Sint Eustatius und Saba</option><option value="BA">Bosnien und Herzegowina</option><option value="BW">Botsuana</option><option value="BR">Brasilien</option><option value="VG">Britische Jungferninseln</option><option value="IO">Britisches Territorium im Indischen Ozean</option><option value="BN">Brunei Darussalam</option><option value="BG">Bulgarien</option><option value="BF">Burkina Faso</option><option value="BI">Burundi</option><option value="CV">Cabo Verde</option><option value="EA">Ceuta und Melilla</option><option value="CL">Chile</option><option value="CN">China</option><option value="CK">Cookinseln</option><option value="CR">Costa Rica</option><option value="CI">Côte d'Ivoire</option><option value="CW">Curaçao</option><option value="DK">Dänemark</option><option value="DE">Deutschland</option><option value="DG">Diego Garcia</option><option value="DM">Dominica</option><option value="DO">Dominikanische Republik</option><option value="DJ">Dschibuti</option><option value="EC">Ecuador</option><option value="SV">El Salvador</option><option value="ER">Eritrea</option><option value="EE">Estland</option><option value="SZ">Eswatini</option><option value="FK">Falklandinseln</option><option value="FO">Färöer</option><option value="FJ">Fidschi</option><option value="FI">Finnland</option><option value="FR">Frankreich</option><option value="GF">Französisch-Guayana</option><option value="PF">Französisch-Polynesien</option><option value="TF">Französische Süd- und Antarktisgebiete</option><option value="GA">Gabun</option><option value="GM">Gambia</option><option value="GE">Georgien</option><option value="GH">Ghana</option><option value="GI">Gibraltar</option><option value="GD">Grenada</option><option value="GR">Griechenland</option><option value="GL">Grönland</option><option value="GP">Guadeloupe</option><option value="GU">Guam</option><option value="GT">Guatemala</option><option value="GG">Guernsey</option><option value="GN">Guinea</option><option value="GW">Guinea-Bissau</option><option value="GY">Guyana</option><option value="HT">Haiti</option><option value="HN">Honduras</option><option value="IN">Indien</option><option value="ID">Indonesien</option><option value="IQ">Irak</option><option value="IR">Iran</option><option value="IE">Irland</option><option value="IS">Island</option><option value="IM">Isle of Man</option><option value="IL">Israel</option><option value="IT">Italien</option><option value="JM">Jamaika</option><option value="JP">Japan</option><option value="YE">Jemen</option><option value="JE">Jersey</option><option value="JO">Jordanien</option><option value="KY">Kaimaninseln</option><option value="KH">Kambodscha</option><option value="CM">Kamerun</option><option value="CA">Kanada</option><option value="IC">Kanarische Inseln</option><option value="KZ">Kasachstan</option><option value="QA">Katar</option><option value="KE">Kenia</option><option value="KG">Kirgisistan</option><option value="KI">Kiribati</option><option value="CC">Kokosinseln</option><option value="CO">Kolumbien</option><option value="KM">Komoren</option><option value="CG">Kongo-Brazzaville</option><option value="CD">Kongo-Kinshasa</option><option value="XK">Kosovo</option><option value="HR">Kroatien</option><option value="CU">Kuba</option><option value="KW">Kuwait</option><option value="LA">Laos</option><option value="LS">Lesotho</option><option value="LV">Lettland</option><option value="LB">Libanon</option><option value="LR">Liberia</option><option value="LY">Libyen</option><option value="LI">Liechtenstein</option><option value="LT">Litauen</option><option value="LU">Luxemburg</option><option value="MG">Madagaskar</option><option value="MW">Malawi</option><option value="MY">Malaysia</option><option value="MV">Malediven</option><option value="ML">Mali</option><option value="MT">Malta</option><option value="MA">Marokko</option><option value="MH">Marshallinseln</option><option value="MQ">Martinique</option><option value="MR">Mauretanien</option><option value="MU">Mauritius</option><option value="YT">Mayotte</option><option value="MX">Mexiko</option><option value="FM">Mikronesien</option><option value="MC">Monaco</option><option value="MN">Mongolei</option><option value="ME">Montenegro</option><option value="MS">Montserrat</option><option value="MZ">Mosambik</option><option value="MM">Myanmar</option><option value="NA">Namibia</option><option value="NR">Nauru</option><option value="NP">Nepal</option><option value="NC">Neukaledonien</option><option value="NZ">Neuseeland</option><option value="NI">Nicaragua</option><option value="NL">Niederlande</option><option value="NE">Niger</option><option value="NG">Nigeria</option><option value="NU">Niue</option><option value="KP">Nordkorea</option><option value="MP">Nördliche Marianen</option><option value="MK">Nordmazedonien</option><option value="NF">Norfolkinsel</option><option value="NO">Norwegen</option><option value="OM">Oman</option><option value="AT">Österreich</option><option value="PK">Pakistan</option><option value="PS">Palästinensische Autonomiegebiete</option><option value="PW">Palau</option><option value="PA">Panama</option><option value="PG">Papua-Neuguinea</option><option value="PY">Paraguay</option><option value="PE">Peru</option><option value="PH">Philippinen</option><option value="PN">Pitcairninseln</option><option value="PL">Polen</option><option value="PT">Portugal</option><option value="XA">Pseudo-Akzente</option><option value="XB">Pseudo-Bidi</option><option value="PR">Puerto Rico</option><option value="MD">Republik Moldau</option><option value="RE">Réunion</option><option value="RW">Ruanda</option><option value="RO">Rumänien</option><option value="RU">Russland</option><option value="SB">Salomonen</option><option value="ZM">Sambia</option><option value="WS">Samoa</option><option value="SM">San Marino</option><option value="ST">São Tomé und Príncipe</option><option value="SA">Saudi-Arabien</option><option value="SE">Schweden</option><option value="CH">Schweiz</option><option value="SN">Senegal</option><option value="RS">Serbien</option><option value="SC">Seychellen</option><option value="SL">Sierra Leone</option><option value="ZW">Simbabwe</option><option value="SG">Singapur</option><option value="SX">Sint Maarten</option><option value="SK">Slowakei</option><option value="SI">Slowenien</option><option value="SO">Somalia</option><option value="HK">Sonderverwaltungsregion Hongkong</option><option value="MO">Sonderverwaltungsregion Macau</option><option value="ES">Spanien</option><option value="SJ">Spitzbergen und Jan Mayen</option><option value="LK">Sri Lanka</option><option value="BL">St. Barthélemy</option><option value="SH">St. Helena</option><option value="KN">St. Kitts und Nevis</option><option value="LC">St. Lucia</option><option value="MF">St. Martin</option><option value="PM">St. Pierre und Miquelon</option><option value="VC">St. Vincent und die Grenadinen</option><option value="ZA">Südafrika</option><option value="SD">Sudan</option><option value="GS">Südgeorgien und die Südlichen Sandwichinseln</option><option value="KR">Südkorea</option><option value="SS">Südsudan</option><option value="SR">Suriname</option><option value="SY">Syrien</option><option value="TJ">Tadschikistan</option><option value="TW">Taiwan</option><option value="TZ">Tansania</option><option value="TH">Thailand</option><option value="TL">Timor-Leste</option><option value="TG">Togo</option><option value="TK">Tokelau</option><option value="TO">Tonga</option><option value="TT">Trinidad und Tobago</option><option value="TA">Tristan da Cunha</option><option value="TD">Tschad</option><option value="CZ">Tschechien</option><option value="TN">Tunesien</option><option value="TR">Türkei</option><option value="TM">Turkmenistan</option><option value="TC">Turks- und Caicosinseln</option><option value="TV">Tuvalu</option><option value="UG">Uganda</option><option value="UA">Ukraine</option><option value="HU">Ungarn</option><option value="UY">Uruguay</option><option value="UZ">Usbekistan</option><option value="VU">Vanuatu</option><option value="VA">Vatikanstadt</option><option value="VE">Venezuela</option><option value="AE">Vereinigte Arabische Emirate</option><option value="US">Vereinigte Staaten</option><option value="GB">Vereinigtes Königreich</option><option value="VN">Vietnam</option><option value="WF">Wallis und Futuna</option><option value="CX">Weihnachtsinsel</option><option value="EH">Westsahara</option><option value="CF">Zentralafrikanische Republik</option><option value="CY">Zypern</option>
                            </select>
                        </div>
                        <br><br>
                
                        <div class="row">
                            <label for="firstName"><i style="color:red">*</i>  FirstName</label>
                            <input type="text" id="firstName" name="firstName" required class="customizeInquiry">
                        </div>
                        <br><br>
                
                        <div class="row">
                            <label for="lastName"><i style="color:red">*</i>  LastName</label>
                            <input type="text" id="lastName" name="lastName" required class="customizeInquiry">
                        </div>
                        <br><br>
                
                        <div class="row">
                            <label for="email"><i style="color:red">*</i>  Email</label>
                            <input type="text" id="email" name="email" required class="customizeInquiry">
                        </div>
                        <br><br>
                
                        <div class="row">
                            <label for="phone">Phone</label>
                            <input type="tel" id="phone" name="phone" class="customizeInquiry">
                        </div>
                        <br><br>
                
                        <div class="row">
                            <label for="company"><i style="color:red">*</i>  Company</label>
                            <input type="text" id="company" name="company" required class="customizeInquiry">
                        </div>
                        <br><br>
                
                        <div class="row">
                            <label for="location">Address</label>
                            <input type="text" id="location" name="location" class="customizeInquiry">
                        </div>
                        <br><br>
                    </div>

                    <!-- 右边 -->
                     <div class="xunpan-form-right">
                        <div class="row">
                            <label for="product"><i style="color:red">*</i>  Product</label>
                            <select id="product" name="product" required class="customizeInquiry">
                                <option value="" disabled selected>Please select a product...</option>
                                <option value="1">产品 1</option>
                                <option value="2">产品 2</option>
                                <option value="3">产品 3</option>
                                <option value="4">产品 4</option>
                                <option value="5">产品 5</option>
                                <option value="6">产品 6</option>
                                <option value="7">产品 7</option>
                                <option value="8">产品 8</option>
                            </select>
                        </div>
                        
                        <div class="row">
                            <label for="message">Message</label>
                            <textarea id="message" name="message" rows="4" cols="50" class="customizeInquiry"></textarea>
                        </div>
                     </div>
            
                     <!-- 协议 -->
                      <div class="xieyi">
                        <label for="agreement">
                            <input type="checkbox" id="agreement" name="agreement" required class="customizeInquiry">
                            <i style="color:red">*</i> I hereby agree that the above data will be processed in accordance with the privacy statement in order to process my request through the Güdel contact form. This consent can be revoked at any time in the future.</a>
                        </label>
                      </div>
                      
                      <div class="tijiao">
                        <input type="submit" value="Senden" id="customizeInquiryBtn">
                        <p><i style="color: red;">*</i> This field is required.</p>   
                      </div>
                </form>        
            </div>
        </div>
    </div>
</body>
</html>

2、CSS代码

css 复制代码
/* css样式 */

    .xunpan-box{
        width: 100%;
    }
    .xunpan-container{
        max-width: 1200px;
        margin: auto;
        padding: 20px 0;
    }
    .xunpan-title{
        width: 50%;
        margin: auto;
        text-align: center;
        padding: 10px;
    }
    .xunpan-title h2{
        font-size: 27px;
        font-weight: 400;
        text-transform: uppercase;
    }
    .xunpan-title h3{
        font-size: 24px;
        font-weight: 400;
        font-family: math;
    }
    /* .xunpan-form-box{
        width: 60%;
        margin: auto;
    } */
    .xunpan-form-box form{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        font-family: math;
    }
    .xunpan-form-left{
        width: 50%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .xunpan-form-left .row{
        width: 50%;
        margin-bottom: 20px;
    }
    .xunpan-form-left .row label{
        display: block;
        color: #282828;
        font-size: 20px;
        padding: 10px 0;
    }
    .xunpan-form-left .row select{
        width: 90%;
        height: 38px;
        text-indent: 1em;
        color: #454d5a;
        border: 1px solid #dbdbdb;
    }
    .xunpan-form-left .row option{
        color: #454d5a;
    }
    
    .xunpan-form-left .row select:focus {  
        border: 1px solid #900; /* 边框宽度和颜色 */  
        outline: none; /* 可选:移除默认的聚焦轮廓 */  
    }
    .xunpan-form-left .row input{
        width: 87%;
        height: 32px;
        text-indent: 1em;
        border: 1px solid #dbdbdb;
    }
    .xunpan-form-left .row input:focus {  
        border: 1px solid #900; /* 边框宽度和颜色 */  
        outline: none; /* 可选:移除默认的聚焦轮廓 */  
    }
    .xunpan-form-right{
        width: 50%;
    }
    .xunpan-form-right .row{
        width: 100%;
        margin-bottom: 20px;
    }
    .xunpan-form-right .row label{
        display: block;
        color: #282828;
        font-size: 20px;
        padding: 10px 0;
    }
    .xunpan-form-right .row select{
        width: 100%;
        height: 38px;
        text-indent: 1em;
        color: #454d5a;
        border: 1px solid #dbdbdb;
    }
    .xunpan-form-right .row select:focus {  
        border: 1px solid #900; /* 边框宽度和颜色 */  
        outline: none; /* 可选:移除默认的聚焦轮廓 */  
    }
    .xunpan-form-right .row textarea{
        border: 1px solid #dbdbdb;
        width: 99%;
        height: 225px;
        text-indent: 1em;
        font-size: 18px;
    }
    .xunpan-form-right .row textarea:focus {  
        border: 1px solid #900; /* 边框宽度和颜色 */  
        outline: none; /* 可选:移除默认的聚焦轮廓 */  
    }
    .xunpan-box .xieyi{
        margin-top: 20px;
        width: 48%;
        color: #282828;
    }
    .xunpan-box .xieyi label{
        font-size: 18px;
    }
    .xunpan-box .xieyi input{
        width: 15px;
        height: 15px;
    }
    .tijiao{
        width: 50%;
        /* display: flex;
        align-items: center;
        justify-content: center; */
        margin-top: 20px;
    }
    .tijiao input{
        width: 100%;
        height: 50px;
        background-color: #900;
        border-color: #900;
        color: #fff;
        border: none;
        cursor: pointer;
        font-size: 20px;
        transition: all 0.5s;
    }
    .tijiao input:hover{
        background-color: #730000;
    }
    @media screen and (max-width:768px) {
        .xunpan-title{
            width: 95%;
        }
        .xunpan-title h2{
            font-size: 25px;
        }
        .xunpan-title h3{
            font-size: 20px;
        }
        .xunpan-form-left{
            width: 100%;
        }
        .xunpan-form-left .row select{
            font-size: 10px;
        }
        .xunpan-form-right{
            width: 95%;
        }
        .xunpan-box .xieyi{
            width: 100%;
            margin-top: 0;
            font-size: 18px;
        }
        .tijiao{
            width: 100%;
        }
    }

3、JS代码

html 复制代码
//此处获取元素省事引用了jQuery方法

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>

<script>
    $(document).ready(function() {
        $('#customizeInquiryBtn').on('click', function() {
            // 获取非hidden的输入框的数据
            let isValid = true;
            const inputs = $('.customizeInquiry');
            const enquiryContent = {};
             // 通过ID获取checkbox元素  
            var agreementCheckbox = document.getElementById('agreement');  

            // 循环查看是否表单为空
            inputs.each(function() {
                const value = $(this).val();
                const name = $(this).attr('name'); 
                // console.log($(this).context.id);
                           
                if (!value) {
                    // 此处做了一个判断,如果是非必填项则过    
                    if($(this).context.id == "message" || $(this).context.id == "location" || $(this).context.id == "phone"){
                        $(this).siblings('.empty-tip').hide();
                        enquiryContent[name] = value;
                    }else{
                        $(this).siblings('.empty-tip').show();
                        isValid = false;
                    } 
                } else {
                    $(this).siblings('.empty-tip').hide();
                    enquiryContent[name] = value;
                }
            });

            // 验证是否通过
            if (isValid) {
                // 判断是否勾选协议
                if (agreementCheckbox.checked) {
                    // 对表单结果进行处理,此处做了打印json数据
                    console.log(JSON.stringify(enquiryContent));
                    alert('Submitted successfully!');
                    location.reload()  // 刷新页面
                } else {
                    alert('Please tick the privacy agreement below!');
                }
            } else {
                alert("Please edit the complete information!")
            }
            
            
        //     表单结果也可做ajax请求进行复杂逻辑处理
        //     if (isValid) {
        //         const enquiryContentJSON = JSON.stringify(enquiryContent);
        //         // console.log(enquiryContentJSON);

        //     // 发起 AJAX POST 请求
        //     $.ajax({
        //         type: "POST",
        //         url: "https://example.com",
        //         data: {
        //             enquiryContent: enquiryContentJSON,
        //             ...其它参数
        //         },
        //         success: function(data) {
        //             alert('Submit success!')
        //             // location.reload();
        //             // 处理成功响应
        //             console.log(data);
        //         },
        //         error: function(request) {
        //             console.log("Connection error", request);
        //             // 处理错误响应
        //         }
        //     });
        // }else{
        //     alert('Please enter complete form information!')
        // }
        });
    });
</script>
相关推荐
qq. 28040339843 小时前
CSS层叠顺序
前端·css
喝拿铁写前端3 小时前
SmartField AI:让每个字段都找到归属!
前端·算法
猫猫不是喵喵.3 小时前
vue 路由
前端·javascript·vue.js
烛阴4 小时前
JavaScript Import/Export:告别混乱,拥抱模块化!
前端·javascript
bin91534 小时前
DeepSeek 助力 Vue3 开发:打造丝滑的表格(Table)之添加行拖拽排序功能示例12,TableView16_12 拖拽动画示例
前端·javascript·vue.js·ecmascript·deepseek
GISer_Jing4 小时前
[Html]overflow: auto 失效原因,flex 1却未设置min-height &overflow的几个属性以及应用场景
前端·html
程序员黄同学5 小时前
解释 Webpack 中的模块打包机制,如何配置 Webpack 进行项目构建?
前端·webpack·node.js
拉不动的猪5 小时前
vue自定义“权限控制”指令
前端·javascript·vue.js
再学一点就睡5 小时前
浏览器页面渲染机制深度解析:从构建 DOM 到 transform 高效渲染的底层逻辑
前端·css
拉不动的猪5 小时前
刷刷题48 (setState常规问答)
前端·react.js·面试