Форма не работает, включая CDN семантики пользовательского интерфейса - PullRequest
Новая
       27

Форма не работает, включая CDN семантики пользовательского интерфейса

1 голос
/ 23 апреля 2020

Я пытаюсь создать форму, в которой я использую пользовательский интерфейс fomanti c, но он не работает, календарь и раскрывающиеся списки не реагируют на нажатие. Я скачал zip-файл semanti c UI и включил их в моя страница формы, но она не отвечает, что мне здесь не хватает, буду очень признателен за вашу помощь в этом. 

<!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. 

<!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>

1 Ответ

0 голосов
/ 23 апреля 2020

Надеюсь, это поможет. Неправильное размещение файлов CSS и js. 

<!DOCTYPE html>
<html>
   <head>
      <title>Form</title>
      <script src="https://code.jquery.com/jquery-3.1.1.min.js" crossorigin="anonymous"></script>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
      <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
      <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>
   </body>
</html>
...