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/bootstrap@4.6.1/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/jquery@3.5.1/dist/jquery.slim.min.js"

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

src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"

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

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy