Simple Form#

Let create a simple form. Demo HERE

  • Transform and translate a button
  • Border and outline
  • Hover button and style
  • Simple file input
<html>
  <head>
    <title>Form</title>
    <style>
      :root {
        box-sizing: border-box;
      }
      *,
      ::before,
      ::after {
        box-sizing: inherit;
      }


      body {
        background-color: antiquewhite;
      }


      .container {
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
      }


      .form {
        display: grid;
        row-gap: 10px;
        grid-template-columns: repeat(1, minmax(0, 1fr));
        background-color: gainsboro;
        padding: 20px 20px;
      }


      .input-prompt {
        width: 100%;
        padding: 20px 10px;
      }


      .button-submit {
        position: absolute;
        padding: 10px 15px;
        border-radius: 5px;
        background-color: greenyellow;
        border: none;
        cursor: pointer;
        transform: translateY(-50%);
        top: 50%;
        right: 10px;
      }


      .button-submit:hover {
        background-color: aqua;
      }


      .container-prompt {
        position: relative;
      }


      .input-message {
        width: 100%;
        padding: 20px 10px;
        border-radius: 5px;
        border: 2px solid blue;
        outline: none;
        /* outline: red solid 3px; */
      }


      .input-message:focus {
        border: 2px dashed rebeccapurple;
        outline: none;
        /* outline: blue solid 3px; */
      }


      .input-email {
        padding: 20px 10px;
        width: 100%;
      }


      .input-file {
        width: 100%;
        padding: 20px 10px;
        cursor: pointer;
        background-color: white;
      }


      ::-webkit-file-upload-button {
        cursor: pointer;
      }
    </style>
  </head>


  <body>
    <div class="container">
      <div>
        <form class="form">
          <div class="container-prompt">
            <input type="text" id="prompt" name="prompt" class="input-prompt" />
            <button class="button-submit">Submit</button>
          </div>
          <div>
            <input
              type="text"
              id="message"
              name="message"
              class="input-message"
            />
          </div>
          <div>
            <label for="email">Email</label>
            <input
              type="text"
              name="email"
              id="email"
              class="input-email"
              placeholder="abc@gmail.com"
            />
          </div>
          <div>
            <label for="file">File</label>
            <input type="file" id="file" name="file" class="input-file" />
          </div>
        </form>
      </div>
    </div>
  </body>
</html>

Upload Form#

Let create a simple form for uploading file. Demo HERE

  • Drop area for uploading
  • Hover pointer
  • Overwrite submit button
<html>
  <head>
    <style>
      :root {
        box-sizing: border-box;
      }


      body {
        background-color: antiquewhite;
      }


      .container {
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
      }


      .input-upload {
        width: 350px;
        max-width: 100%;
        color: #444;
        padding: 5px;
        background: #fff;
        border-radius: 10px;
        border: 1px solid #555;
      }


      .input-upload::-webkit-file-upload-button {
        margin-right: 20px;
        border: none;
        background: #084cdf;
        padding: 10px 20px;
        border-radius: 10px;
        color: #fff;
        cursor: pointer;
        transition: background 0.2s ease-in-out;
      }


      .input-submit {
        background-color: #084cdf;
        color: white;
        border: none;
        padding: 10px 30px;
        border-radius: 10px;
        cursor: pointer;
        margin-top: 10px;
      }


      .drop-container {
        position: relative;
        display: flex;
        gap: 10px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 20px;
        height: 200px;
        border: 2px dashed #555;
        color: #444;
        cursor: pointer;
        transition: background 0.2s ease-in-out, border 0.2s ease-in-out;
      }
      .drop-container:hover {
        background: #eee;
        border-color: #111;
      }


      .drop-container:hover .drop-title {
        color: #222;
      }


      .drop-title {
        color: #444;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
        transition: color 0.2s ease-in-out;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div>
        <form
          enctype="multipart/form-data"
          action="./handle-upload.php"
          method="post"
        >
          <label for="file" class="drop-container" id="dropcontainer">
            <input type="file" class="input-upload" id="file" name="myFile" />
          </label>
          <input type="submit" class="input-submit" />
        </form>
      </div>
    </div>
  </body>
  <script></script>
</html>

Vertical Center#

Here is a simple trick to do center Vertical

.button-submit {
  position: absolute;
  padding: 10px 15px;
  border-radius: 5px;
  background-color: greenyellow;
  border: none;
  cursor: pointer;
  transform: translateY(-50%);
  top: 50%;
  right: 10px;
}


.button-submit:hover {
  background-color: aqua;
}


.container-prompt {
  position: relative;
}

Handle Form#

Let write a simple javascript to handle the POST request created by form

const storyOutput = document.getElementById('story-output')


const callBedrockStream = async () => {
  storyOutput.innerText = ''


  const topic = document.getElementById('text-input').value


  if (topic) {
    try {
      const response = await fetch('/bedrock-stream', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ topic: topic })
      })


      console.log(response)
      const reader = response.body.getReader()
      const decoder = new TextDecoder()


      while (true) {
        const { done, value } = await reader.read()
        if (done) {
          break
        }
        const text = decoder.decode(value)
        console.log(text)
        storyOutput.innerText += text
      }
    } catch (error) {
      console.log(error)
    }
  } else {
    console.log('Please enter question ...')
  }
}


document.getElementById('submit').addEventListener('click', callBedrockStream)

Full example in this bedrock client

bedrock.html
<html>
  <head>
    <style>
      :root {
        box-sizing: border-box;
      }
      *,
      ::before,
      ::after {
        box-sizing: inherit;
      }


      .container {
        width: 80%;
        margin: auto;
        /* background-color: antiquewhite; */
      }


      .question-form {
        position: relative;
      }


      button {
        cursor: pointer;
        background-color: orange;
        padding: 1em;
        padding-left: 1.5em;
        padding-right: 1.5em;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 1em;
      }


      .text-area {
        background-color: azure;
        margin-top: 1em;
      }


      .text-input {
        background-color: aquamarine;
        width: 100%;
        padding: 1em;
        font-size: large;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="question-form">
        <form>
          <input class="text-input" type="text" id="text-input" />
        </form>
        <button id="submit">Submit</button>
      </div>
      <div class="text-area">
        <p id="story-output"></p>
      </div>
    </div>
    <script>
      const storyOutput = document.getElementById('story-output')


      const callBedrockStream = async () => {
        storyOutput.innerText = ''


        const topic = document.getElementById('text-input').value


        if (topic) {
          try {
            const response = await fetch('/bedrock-stream', {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json'
              },
              body: JSON.stringify({ topic: topic })
            })


            console.log(response)
            const reader = response.body.getReader()
            const decoder = new TextDecoder()


            while (true) {
              const { done, value } = await reader.read()
              if (done) {
                break
              }
              const text = decoder.decode(value)
              console.log(text)
              storyOutput.innerText += text
            }
          } catch (error) {
            console.log(error)
          }
        } else {
          console.log('Please enter question ...')
        }
      }


      document
        .getElementById('submit')
        .addEventListener('click', callBedrockStream)
    </script>
  </body>
</html>

Image Toggle#

Let create a simple javascript to toggle image visible and hidden. Demo HERE

  • Vertical center
  • Visible and hidden image
<html>
  <head>
    <title>Get Image</title>
    <style>
      :root {
        box-sizing: border-box;
      }


      *,
      ::after,
      ::before {
        box-sizing: inherit;
      }


      body {
        background-color: antiquewhite;
      }


      .container {
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
      }


      .button-get-image {
        background-color: orange;
        padding: 20px 20px;
        width: 150px;
        cursor: pointer;
        border: none;
      }


      .image-demo {
        width: 500px;
        height: auto;
      }


      .container-image {
        margin-top: 30px;
        background-color: lightgray;
        height: 500px;
        width: 100%;
      }


      .container-inner {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <button class="button-get-image" id="get-image">Get Image</button>
      <div class="container-image">
        <div class="container-inner">
          <img
            alt="test"
            class="image-demo"
            id="image-demo"
            src="https://cdk.entest.io/thumbnail/hello-cdk-construct.png"
          />
        </div>
      </div>
    </div>
  </body>
  <script>
    console.log("HELLO");


    const button = document.getElementById("get-image");
    button.addEventListener("click", () => {
      console.log("click button");


      document.getElementById("image-demo").src =
        "https://cdk.entest.io/thumbnail/hello-cdk-construct.png";


      document.getElementById("image-demo").style.visibility = "visible";
    });
  </script>
</html>