HTML原生手搓询盘

凉风听雪

于 2024-08-15 17:00:55 发布

阅读量132

点赞数 8

分类专栏：前端开发文章标签： html 前端 javascript css 询盘 form 表单

本文链接：https://blog.csdn.net/p_s_p/article/details/141226172

版权

前端开发专栏收录该内容

22 篇文章 0 订阅

订阅专栏

效果展示：

1、PC布局：

2、移动布局：

3、交互展示：

1、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样式 */

    .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代码

//此处获取元素省事引用了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>