Next post Previous post

Updated library searching

August 16, 2025 at 4:24 PM by Dr. Drang

After a couple of months of using my library search web page, I decided it needed a small upgrade, which I added today. It’s a new button that resets the search form.

The page used to look like this on my phone before and after a search:

Library search on iPhone

This was fine for a single search, but when I did two or more searches in a row, I had to delete the entry fields before typing in new search terms. This wasn’t the worst thing in the world, but I decided it would be nicer to have a Reset button that deleted the search fields with a single tap. It now looks like this:

Updated library search web page

Tapping the Reset button after a search returns it to the state on the left.

There wasn’t much to change. The Python CGI script that builds the page now has this section of code,

python:
# Output HTML
print(f'''Content-Type: text/html

<html>
  <head>
    <title>Library Search</title>
    <link rel="stylesheet" href="search.css">
  </head>
  <body>
    <h1>Library Search</h1>
    <form method="get" action="search.py">
      <p class="desc">Enter strings for title, author, or both</p>
      <label for="title">Title:</label>
      <input type="text" name="title" value="{tString}">
      <label for="author">Author:</label>
      <input type="text" name="author" value="{aString}">
      <input type="submit" value="Submit">
      &nbsp;&nbsp;
      <a id="reset" href="search.py">Reset</a>
    </form>
    <div class="results">
    <h2>{rheader}</h2>''')

where the addition is this pair of lines of HTML to the print call:

xml:
      &nbsp;&nbsp;
      <a id="reset" href="search.py">Reset</a>

I’ve basically just added a link that reloads the CGI script with no parameters. To get the link to look like a button, I added two short sections to the CSS. One in the default area,

css:
form a[id="reset"] {
    padding: .6em 1.5em;
    border: none;
    border-radius: 4px;
    color: #000;
    background-color: #ddd;
    text-decoration: none;
}

which affects the page when I look at in on my computer, and another in the @media (pointer: coarse) area,

css:
form input[type="submit"] {
    padding: .6em 3.25em;
    margin-top: 0.5em;
}
form a[id="reset"] {
    padding: .6em 3.5em;
    margin-top: 0.5em;
}

which affects the page when I look at it on my phone. In addition to styling the Reset button, this shrinks the Submit button so they both fit on the same line.

The full Python and CSS code is back on the original post.

Next post Previous post