Scribd
Upload
2 views3 pages

Web Design

The document is an HTML template for a Library Management System featuring a navigation bar, a welcome message, and a form for users to add books. It includes input fields for user name, book name, and book type, along with a table to display issued books. The layout utilizes Bootstrap for styling and responsiveness.

Uploaded by

chosenshoko
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
2 views3 pages

Web Design

The document is an HTML template for a Library Management System featuring a navigation bar, a welcome message, and a form for users to add books. It includes input fields for user name, book name, and book type, along with a table to display issued books. The layout utilizes Bootstrap for styling and responsiveness.

Uploaded by

chosenshoko
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<link
rel="stylesheet"

href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/
eSrtxUkn"
crossorigin="anonymous"
/>
<title>Library Management System</title>
</head>

<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Online Library</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">


<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#"
>Home <span class="sr-only">(current)</span></a
>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input
class="form-control mr-sm-2"
type="search"
placeholder="Search"
aria-label="Search"
/>
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">
Search
</button>
</form>
</div>
</nav>
<div id="alertuser"></div>

<div class="container my-3">


<h1>Welcome to My Library</h1>
<hr />
<form id="mylibraryform">
<div class="form-group">
<label for="exampleInputEmail1">User Name</label>
<input
type="text"
class="form-control"
id="User-Name"
aria-describedby="emailHelp"
/>
<small id="emailHelp" class="form-text text-muted"
>We'll never share your user name with anyone else.</small
>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Book Name</label>
<input type="text" class="form-control" id="Book-Name" />
</div>
<div class="form-group">
<label for="bookType">Book Type</label>
<div class="check-boxes my-3 mx-5">
<div class="form-check p-2">
<input
class="form-check-input"
type="radio"
name="check-box"
id="Fiction"
value="Fiction"
/>
<label class="form-check-label" for="Fiction"> Fiction </label>
</div>
<div class="form-check p-2">
<input
class="form-check-input"
type="radio"
name="check-box"
id="Programing"
value="Programing"
/>
<label class="form-check-label" for="Programing">
Programing
</label>
</div>
<div class="form-check p-2">
<input
class="form-check-input"
type="radio"
name="check-box"
id="Cooking"
value="Cooking"
/>
<label class="form-check-label" for="Cooking"> Cooking </label>
</div>
</div>
</div>

<button type="submit" class="btn btn-outline-dark">Add Book</button>


</form>
<table class="table table-dark my-3">
<thead>
<tr>
<th scope="col">Sl No.</th>
<th scope="col">Date of issue</th>
<th scope="col">Reader</th>
<th scope="col">Book Name</th>
<th scope="col">Genre</th>
<th scope="col"></th>
</tr>
</thead>
<tbody id="table-body"></tbody>
</table>
</div>

<script src="script.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"

integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script

src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"

integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF"
crossorigin="anonymous"
></script>
</body>
</html>

You might also like