该表单不适用于包含语义UI CDN

问题描述 投票:0回答:1

我正在尝试创建一个使用fomantic UI的表单,但它无法正常工作,日历和下拉列表在单击时没有响应,我已经下载了语义ui zip文件,并将其包含在我的表单页面中,但没有响应,我在这里所缺少的,将深深感谢您对此的帮助。

这是我的html。

<!DOCTYPE html>
<html>
<head>
    <title>Form</title>

    <link rel="stylesheet" type="text/css" href="../resources/assets/Semantic-UI-CSS-master/semantic.css">

    <link href="https://fonts.googleapis.com/css2?family=Mitr:wght@500&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="../resources/css/biodata.css">
</head>
<body>

        <div class="ui blue inverted borderless menu">
          <a class="active item">
            Home
          </a>
           <div class="right menu">
            <a class="item">
            Login
          </a>
          <a class="item">
            Sign Up
          </a>
             <a class="item">
            Sign Out
          </a>
          </div>
        </div>



        <div class="container centered" id="datacontainer">
            <form class="ui form" id="dataform">

                <div class="ui card">
                   <div class="image" id="image-1">
                        <img src="C:\Users\ABC\Pictures\picture-1.jpg">
                    </div>
                </div>
                 <div class="field">
                    <div class="inline fields">
                       <span class="indataform"> <label>First Name</label> </span>
                        <input class="forminclass" type="text" name="first-name" placeholder="First Name">
                    </div>
                 </div>
                 <div class="field">
                    <div class="inline fields">
                       <span class="indataform"> <label>Last Name</label> </span>
                        <input class="forminclass" type="text" name="last-name" placeholder="Last Name">
                   </div>
                  </div>
                  <div class="field">
                        <div class="inline fields">
                           <span class="indataform"> <label>Email</label></span>
                            <input class="forminclass" type="text" name="email" placeholder="Email">
                    </div>
                  </div>
                  <div class="field">
                        <div class="inline fields">
                        <span class="indataform"> <label>Phone</label></span>
                            <input class="forminclass" type="text" name="phone" placeholder="Phone">
                    </div>
                  </div>
                  <div class="field">
                    <div class="inline fields">
                   <span class="indataform">   <label>Gender</label> </span>
                          <div class="ui selection dropdown">
                              <input class="forminclass" type="hidden" name="gender">
                              <i class="dropdown icon"></i>
                              <div class="default text">Gender</div>
                              <div class="menu">
                                  <div class="item" data-value="1">Male</div>
                                  <div class="item" data-value="0">Female</div>
                              </div>
                          </div>
                      </div>
                </div>
                <div class="field">
                    <div class="inline fields">
                    <span class="indataform">   <label>Date of Birth</label> </span>
                        <div class="ui calendar" id="example1">
                            <div class="ui input left icon">
                              <i class="calendar icon"></i>
                              <input id="dob"type="text">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="field">
                    <div class="inline fields">
                  <span class="indataform">  <label>Text</label> </span>
                    <textarea id="areat" rows="2"></textarea>
                </div>
              </div>

                 <button class="ui green button" id="edit" type="submit">Edit</button>
                 <button class="ui flex primary button" id="save" type="submit">Save</button>

        </form>
        </div>


<script
  src="https://code.jquery.com/jquery-3.5.0.js"
  integrity="sha256-r/AaFHrszJtwpe+tHyNi/XCfMxYpbsRg2Uqn0x3s2zc="
  crossorigin="anonymous"></script>
<script type="text/javascript" src="../resources/assets/Semantic-UI-CSS-master/semantic.min.js"></script>

</body>
</html>
html css semantic-ui cdn
1个回答
0
投票

希望这会有所帮助。 CSS和js文件的位置不正确。

© www.soinside.com 2019 - 2024. All rights reserved.