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>
相关推荐
喜葵8 分钟前
前端安全防护深度实践:从XSS到供应链攻击的全面防御
前端·安全·xss
_r0bin_12 分钟前
分片上传-
前端·javascript·状态模式
东北南西16 分钟前
手写React状态hook
前端·javascript·react.js
王ASC17 分钟前
禁止浏览器自动填充密码的方法
html
诗书画唱17 分钟前
【前端教程】JavaScript DOM 操作实战案例详解
开发语言·前端·javascript
lypzcgf18 分钟前
Coze源码分析-资源库-删除提示词-前端源码
前端·typescript·react·ai应用·coze·coze源码分析·智能体平台
代码青铜19 分钟前
【实战指南】Cursor前端+Zion后端:10分钟打造能收款的AI商业应用MVP
前端·人工智能
quan26311 小时前
Vue实践篇-02,AI生成代码
前端·javascript·vue.js
GIS之路1 小时前
GDAL 读取影像元数据
前端
qb2 小时前
vue3.5.18源码-编译-入口
前端·vue.js·架构