【发布时间】：2020-04-23 16:14:06
【问题描述】：
我正在尝试创建一个表单，我正在使用 fomantic UI 但它不起作用，日历和下拉菜单在点击时没有响应，我已经下载了语义 UI zip 文件并将它们包含在我的表单页面中，但它是没有回应，我在这里缺少什么，将非常感谢您对此的帮助。
<!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>
【问题讨论】：
标签： html css semantic-ui cdn