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>
相关推荐
不熬夜的臭宝7 分钟前
每天10个vue面试题(九)
javascript·vue.js·ecmascript
前端熊猫43 分钟前
transform学习
前端·学习·html
sun lover1 小时前
electron快速上手
javascript·electron
GISer_Jing1 小时前
React渲染流程与更新diff算法
前端·javascript·react.js
郑祎亦1 小时前
JavaWeb开发:HTML 页面与接口对接
前端·后端·java-ee·html
Au_ust1 小时前
css:感觉稍微高级一点的布局
前端·css
下页、再停留1 小时前
【前端】CSS修改div滚动条样式
前端·css
一晌贪欢i1 小时前
CSS中calc语法不生效
前端·css
前端白袍1 小时前
Vue:后端返回二进制文件,前端如何实现浏览器自动下载?
前端·javascript·vue.js
问道飞鱼1 小时前
【前端知识】简单讲讲什么是微前端
前端·微前端·qiankun·single-spa