html - 表单无法包含语义 UI CDN
问题描述
我正在尝试创建一个表单,我正在使用 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>
解决方案
希望这会有所帮助。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>
推荐阅读
- python - 是否有一种非循环方式来查找范围内的值,然后从列表中附加数据?
- oracle - 插入触发器之前的行级别
- c# - 如何在 keras.net 中设置 like-"gpu_options.allow_growth=true"?
- java - 基于另一个 ArrayList 添加或更新 ArrayList 的元素
- python - 将数据从 Excel sheet1 映射到 sheet2 在 python 中创建重复列
- python - Pandas merge_asof 显示两个数据框的日期
- kotlin - Kotlin 构造函数重载
- java - 如何设置线视图集监听器
- vba - 我的程序结构不正确 新手
- c++ - 为什么某些布尔表达式的生成汇编程序包含条件跳转?