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 分钟前
就着HTTP聊聊SSE的前世今生
前端·javascript·http
蓝胖子的多啦A梦11 分钟前
Vue+element 日期时间组件选择器精确到分钟,禁止选秒的配置
前端·javascript·vue.js·elementui·时间选选择器·样式修改
夏天想13 分钟前
vue2+elementui使用compressorjs压缩上传的图片
前端·javascript·elementui
The_cute_cat15 分钟前
JavaScript的初步学习
开发语言·javascript·学习
海天胜景18 分钟前
vue3 el-table 列增加 自定义排序逻辑
javascript·vue.js·elementui
今晚打老虎z21 分钟前
dotnet-env: .NET 开发者的环境变量加载工具
前端·chrome·.net
用户38022585982427 分钟前
vue3源码解析:diff算法之patchChildren函数分析
前端·vue.js
烛阴32 分钟前
XPath 进阶:掌握高级选择器与路径表达式
前端·javascript
小鱼小鱼干36 分钟前
【JS/Vue3】关于Vue引用透传
前端
JavaDog程序狗38 分钟前
【前端】HTML+JS 实现超燃小球分裂全过程
前端