Html Question posted in
Some basic documentation can be found here.

Html – how could I make my input form change position as the list above grows

I have my HTML as

window.onload = function() {

  /*The initial item number set to 3 */
  var itemNo = 3;

  /* get the date of current day */
  var today = new Date();
  var todaystring = today.toLocaleDateString();

  /* after click the 'add dish' button, the form appears */
  var showformbtn = document.getElementById("btn1");
  showformbtn.onclick = function() {
    var getform = document.getElementById("formdiv");
    getform.style.display = "block";

  }

  /* the button used to add dish after fill the form */
  var addbtn = document.getElementById("btnadd");
  addbtn.onclick = function() {

    var dishname = document.getElementById("dishname").value;
    var storename = document.getElementById("storename").value;
    var rating = document.getElementById("rating").value;
    var feedback = document.getElementById("feedback").value;

    var error1 = document.getElementById("error1");
    var error2 = document.getElementById("error2");
    var error3 = document.getElementById("error3");
    var error4 = document.getElementById("error4");


    /* set a boolean to check and prevent empty input */
    let noError = true;

    /* check empty logic */
    if (dishname === "") {
      error1.innerHTML = "Please input again!";
      error1.style.color = "red";
      document.getElementById("dishname").focus();
      noError = false;
      return false;
    } else {
      error1.innerHTML = "";
    }

    if (storename === "") {
      error2.innerHTML = "Please input again!";
      error2.style.color = "red";
      document.getElementById("storename").focus();
      noError = false;
      return false;
    } else {
      error2.innerHTML = "";
    }

    if (rating == 0) {
      error3.innerHTML = "Please choose a rating";
      error3.style.color = "red";
      document.getElementById("rating").focus();
      noError = false;
      return false;
    } else {
      error3.innerHTML = "";
    }

    if (feedback === "") {
      error4.innerHTML = "Please input again!";
      error4.style.color = "red";
      document.getElementById("feedback").focus();
      noError = false;
      return false;
    } else {
      error4.innerHTML = "";
    }


    /* if no empty input, then add our input into the list */
    if (noError = true) {

      itemNo = itemNo + 1;
      var ele1 = document.createElement("p");
      ele1.innerText = itemNo;
      ele1.classList.add("list");
      ele1.setAttribute("id", itemNo);
      document.getElementById("num").appendChild(ele1);

      var ele2 = document.createElement("p");
      ele2.innerText = dishname;
      ele2.setAttribute("id", itemNo + "dish");
      ele2.classList.add("list");
      document.getElementById("dish").appendChild(ele2);

      var ele3 = document.createElement("p");
      ele3.innerText = storename;
      ele3.setAttribute("id", itemNo + "store");
      ele3.classList.add("list");
      document.getElementById("store").appendChild(ele3);

      var ele4 = document.createElement("p");
      ele4.innerText = rating;
      ele4.setAttribute("id", itemNo + "rating");
      ele4.classList.add("list");
      document.getElementById("rate").appendChild(ele4);

      var ele5 = document.createElement("p");
      ele5.innerText = feedback;
      ele5.setAttribute("id", itemNo + "feedback");
      ele5.classList.add("list");
      document.getElementById("fb").appendChild(ele5);

      var ele6 = document.createElement("p");
      ele6.innerText = todaystring;
      ele6.setAttribute("id", itemNo + "date");
      ele6.classList.add("list");
      document.getElementById("date").appendChild(ele6);


      /* clear the form after add each row */
      document.getElementById("dishname").value = "";
      document.getElementById("storename").value = "";
      document.getElementById("rating").value = 0;
      document.getElementById("feedback").value = "";


      return false;

    }
  }

  /* remove button function */
  var removebtn = document.getElementById("btn3");
  removebtn.onclick = function() {

    var rm1 = document.getElementById(itemNo);
    rm1.remove();

    var rm2 = document.getElementById(itemNo + "dish");
    rm2.remove();

    var rm3 = document.getElementById(itemNo + "store");
    rm3.remove();

    var rm4 = document.getElementById(itemNo + "rating");
    rm4.remove();

    var rm5 = document.getElementById(itemNo + "feedback");
    rm5.remove();

    var rm6 = document.getElementById(itemNo + "date");
    rm6.remove();

    itemNo = itemNo - 1;

  }


  /* clear button function */
  var clearbtn = document.getElementById("btn2");
  clearbtn.onclick = function() {
    location.reload();
  }


  /* end window.onload function */
}
body {
  margin: 0;
  padding: 0;
}

.header {
  display: flex;
  flex-direction: row;
  background-color: #face77;
}

.button {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 18px;
  padding-right: 18px;
  background-color: #face77;
  font-weight: bold;
  font-size: 16px;
  border: transparent;
}

.btnfield {
  position: absolute;
  left: 65%;
}

.hardcoded {
  display: flex;
  flex-direction: row;
  gap: 80px;
  margin-left: 150px;
  margin-top: 25px;
}

.list {
  margin-bottom: 5px;
  margin-top: 10px;
  margin-left: 25px;
}

.inputform {
  position: absolute;
  top: 75%;
  left: 15%;
  display: none;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

footer {
  margin-top: 200px;
  position: absolute;
  top: 95%;
  right: 80%;
}
<div class="header">
  <h2 style="margin-left: 40px">DISH DAIRY</h2>
  <img style="width: 55px; height: 55px;margin-left: 20px;margin-top: 8px" src="./images/Meal.png" alt="icon">
  <p style="margin-left: 50px; font-size: 18px; margin-top: 22px;">Your Personal Food Log</p>
</div>

<h1 style="margin-left: 40px">Welcome!</h1>

<div class="btnfield">
  <button class="button" id="btn1">Add Dish</button>
  <button class="button" id="btn2">Clear All</button>
  <button class="button" id="btn3">Remove Dish</button>
</div>

<div>
  <p style="margin-top:100px; margin-left: 100px"><em>Show My Favourite and Dislike:</em></p>
</div>

<div class="hardcoded">

  <div id="num">
    <p>Item No.</p>
    <p class="list">1</p>
    <p class="list">2</p>
    <p class="list">3</p>
  </div>

  <div id="dish">
    <p style="margin-left:25px">Dish Name</p>
    <p class="list">CoconutStickyRice MiniCake</p>
    <p class="list">TaroUbe MiniCake</p>
    <p class="list">Icy Taro Ball B</p>
  </div>

  <div id="store">
    <p style="margin-left:25px">Store Name</p>
    <p class="list">LA LA Bakeshop</p>
    <p class="list">LA LA Bakeshop</p>
    <p class="list">Meet Fresh</p>
  </div>

  <div id="rate">
    <p style="margin-right:5px;">Rating out of 5</p>
    <p class="list">5</p>
    <p class="list">5</p>
    <p class="list">5</p>
  </div>

  <div id="fb">
    <p style="margin-left: 25px;">Feedback</p>
    <p class="list">so good</p>
    <p class="list">awesome</p>
    <p class="list">amazing</p>
  </div>

  <div id="date">
    <p style="margin-left:24px">Date</p>
    <p class="list">2024/10/18</p>
    <p class="list">2024/11/01</p>
    <p class="list">2024/12/02</p>
  </div>

</div>

<div class="inputform" id="formdiv">
  <form class="form" id="form">
    Dish Name:
    <input type="text" id="dishname">
    <span id="error1"></span> Store Name:
    <input type="text" id="storename">
    <span id="error2"></span> Rating Out Of 5:
    <select name="rating" id="rating">
      <option value="0">-- Choose your rating --</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
    </select>
    <span id="error3"></span> Feedback:
    <input type="text" id="feedback">
    <span id="error4"></span>
    <button type="submit" id="btnadd" style="font-weight: bold; font-size: 16px; margin-left:45px; margin-top: 15px; padding-top: 10px; padding-bottom: 10px; background-color:#face77;max-width: 70px; border:transparent">Add</button>
  </form>
</div>

<footer>
  <p style="font-size: 12px;">Copyright &copy; 2024 All Right Reserved</p>
</footer>

I would like to know how to change my CSS code to make the input form changes its position, as the list above will grow more if I input more rows. How could make the form move closer to bottom as the lists grow??

Thank you so much for help.

Also, I hope any suggestions to help my project better for use.

Thank you for your time 🙂

Tags:

2

Answers


  1. 0

    Dropping absolute positioning in favor of flex or grid, avoids elements to overlap each others.

    Taking out inline style, makes it easier too and can avoid redundant HTML attributes and spare you lots of time when you need to modify/fix your styles.

    When urning flex into a single column, you may use grid. (just an example of a modification made below).

    Some sizing can also be made via max() or min() (padding,gap,margin,…) to give a little more flexibility to visual layouts.

    …

    I have modified your style sheet and removed inline style. This is to show you a few otherwise ways as tips. Probably not what you expected and not how you should have done. These are possible examples.

    The main thing is to avoid inline style and absolute positioning for the main layout.

    Grid and flex might become your bestfriends 🙂

    here is a quick modification from above tips.

    window.onload = function() {

  /*The initial item number set to 3 */
  var itemNo = 3;

  /* get the date of current day */
  var today = new Date();
  var todaystring = today.toLocaleDateString();

  /* after click the 'add dish' button, the form appears */
  var showformbtn = document.getElementById("btn1");
  showformbtn.onclick = function() {
    var getform = document.getElementById("formdiv");
    getform.style.display = "block";

  }

  /* the button used to add dish after fill the form */
  var addbtn = document.getElementById("btnadd");
  addbtn.onclick = function() {

    var dishname = document.getElementById("dishname").value;
    var storename = document.getElementById("storename").value;
    var rating = document.getElementById("rating").value;
    var feedback = document.getElementById("feedback").value;

    var error1 = document.getElementById("error1");
    var error2 = document.getElementById("error2");
    var error3 = document.getElementById("error3");
    var error4 = document.getElementById("error4");


    /* set a boolean to check and prevent empty input */
    let noError = true;

    /* check empty logic */
    if (dishname === "") {
      error1.innerHTML = "Please input again!";
      error1.style.color = "red";
      document.getElementById("dishname").focus();
      noError = false;
      return false;
    } else {
      error1.innerHTML = "";
    }

    if (storename === "") {
      error2.innerHTML = "Please input again!";
      error2.style.color = "red";
      document.getElementById("storename").focus();
      noError = false;
      return false;
    } else {
      error2.innerHTML = "";
    }

    if (rating == 0) {
      error3.innerHTML = "Please choose a rating";
      error3.style.color = "red";
      document.getElementById("rating").focus();
      noError = false;
      return false;
    } else {
      error3.innerHTML = "";
    }

    if (feedback === "") {
      error4.innerHTML = "Please input again!";
      error4.style.color = "red";
      document.getElementById("feedback").focus();
      noError = false;
      return false;
    } else {
      error4.innerHTML = "";
    }


    /* if no empty input, then add our input into the list */
    if (noError = true) {

      itemNo = itemNo + 1;
      var ele1 = document.createElement("p");
      ele1.innerText = itemNo;
      ele1.classList.add("list");
      ele1.setAttribute("id", itemNo);
      document.getElementById("num").appendChild(ele1);

      var ele2 = document.createElement("p");
      ele2.innerText = dishname;
      ele2.setAttribute("id", itemNo + "dish");
      ele2.classList.add("list");
      document.getElementById("dish").appendChild(ele2);

      var ele3 = document.createElement("p");
      ele3.innerText = storename;
      ele3.setAttribute("id", itemNo + "store");
      ele3.classList.add("list");
      document.getElementById("store").appendChild(ele3);

      var ele4 = document.createElement("p");
      ele4.innerText = rating;
      ele4.setAttribute("id", itemNo + "rating");
      ele4.classList.add("list");
      document.getElementById("rate").appendChild(ele4);

      var ele5 = document.createElement("p");
      ele5.innerText = feedback;
      ele5.setAttribute("id", itemNo + "feedback");
      ele5.classList.add("list");
      document.getElementById("fb").appendChild(ele5);

      var ele6 = document.createElement("p");
      ele6.innerText = todaystring;
      ele6.setAttribute("id", itemNo + "date");
      ele6.classList.add("list");
      document.getElementById("date").appendChild(ele6);


      /* clear the form after add each row */
      document.getElementById("dishname").value = "";
      document.getElementById("storename").value = "";
      document.getElementById("rating").value = 0;
      document.getElementById("feedback").value = "";


      return false;

    }
  }

  /* remove button function */
  var removebtn = document.getElementById("btn3");
  removebtn.onclick = function() {

    var rm1 = document.getElementById(itemNo);
    rm1.remove();

    var rm2 = document.getElementById(itemNo + "dish");
    rm2.remove();

    var rm3 = document.getElementById(itemNo + "store");
    rm3.remove();

    var rm4 = document.getElementById(itemNo + "rating");
    rm4.remove();

    var rm5 = document.getElementById(itemNo + "feedback");
    rm5.remove();

    var rm6 = document.getElementById(itemNo + "date");
    rm6.remove();

    itemNo = itemNo - 1;

  }


  /* clear button function */
  var clearbtn = document.getElementById("btn2");
  clearbtn.onclick = function() {
    location.reload();
  }


  /* end window.onload function */
}
    body {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-rows: auto auto auto auto 1fr auto;
  min-height: 100vh;
}

.header {
  display: flex;
  flex-direction: row;
  background-color: #face77;
  align-items: center;
  gap: 1em;
}

h1:first-of-type,
header h2 {
  margin-left: 40px
}

header h2 img {
  width: 55px;
  aspect-ratio: 1;
}

header p {
  font-size: 18px;
}

.button {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 18px;
  padding-right: 18px;
  background-color: #face77;
  font-weight: bold;
  font-size: 16px;
  border: transparent;
}

.btnfield {
  margin-inline: auto 2em;
}

.favourite {
  text-indent: max(100px, 15vw);
}

.hardcoded {
  display: flex;
  gap: min(4.5vw, 80px);
  margin-inline: 2.5vw;
  margin-top: 2rem;
  justify-content: center;
}

.hardcoded p {
  margin-left: 25px;
}

.list {
  margin-bottom: 5px;
  margin-top: 10px;
}

.inputform {
  display: none;
  margin: auto auto 1em max(100px, 15vw);
}

.form {
  display: grid;
  gap: 5px;
}

footer p {
  margin: .5em ;
  font-size: 12px;
}

#btnadd {
  font-weight: bold;
  font-size: 16px;
  margin-left: 45px;
  margin-top: 15px;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #face77;
  max-width: 70px;
  border: transparent;
}
    <header class="header">
  <h2 style="">DISH DAIRY</h2>
  <img style="" src="./images/Meal.png" alt="">
  <p style="">Your Personal Food Log</p>
</header>
<h1 style="">Welcome!</h1>
<p class="btnfield">
  <button class="button" id="btn1">Add Dish</button>
  <button class="button" id="btn2">Clear All</button>
  <button class="button" id="btn3">Remove Dish</button>
</p>
<div>
  <h2 class="favourite"><em>Show My Favourite and Dislike:</em></h2>
</div>
<div class="hardcoded">
  <div id="num">
    <p>Item No.</p>
    <p class="list">1</p>
    <p class="list">2</p>
    <p class="list">3</p>
  </div>

  <div id="dish">
    <p>Dish Name</p>
    <p class="list">CoconutStickyRice MiniCake</p>
    <p class="list">TaroUbe MiniCake</p>
    <p class="list">Icy Taro Ball B</p>
  </div>

  <div id="store">
    <p>Store Name</p>
    <p class="list">LA LA Bakeshop</p>
    <p class="list">LA LA Bakeshop</p>
    <p class="list">Meet Fresh</p>
  </div>

  <div id="rate">
    <p>Rating out of 5</p>
    <p class="list">5</p>
    <p class="list">5</p>
    <p class="list">5</p>
  </div>

  <div id="fb">
    <p>Feedback</p>
    <p class="list">so good</p>
    <p class="list">awesome</p>
    <p class="list">amazing</p>
  </div>

  <div id="date">
    <p>Date</p>
    <p class="list">2024/10/18</p>
    <p class="list">2024/11/01</p>
    <p class="list">2024/12/02</p>
  </div>

</div>
<div class="inputform" id="formdiv">
  <form class="form" id="form">
    Dish Name:
    <input type="text" id="dishname">
    <span id="error1"></span> Store Name:
    <input type="text" id="storename">
    <span id="error2"></span> Rating Out Of 5:
    <select name="rating" id="rating">
      <option value="0">-- Choose your rating --</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
    </select>
    <span id="error3"></span> Feedback:
    <input type="text" id="feedback">
    <span id="error4"></span>
    <button type="submit" id="btnadd" style="">Add</button>
  </form>
</div>
<footer>
  <p style="">Copyright &copy; 2024 All Right Reserved</p>
</footer>
    Login or Signup to reply.
  2. 0

    All HTML – CSS – JavaScript are edited.

    window.onload = function() {

  /*The initial item number set to 3 */
  var itemNo = 3;

  /* get the date of current day */
  var today = new Date();
  var todaystring = today.toLocaleDateString();

  /* after click the 'add dish' button, the form appears */
  var showformbtn = document.getElementById("btn1");
  showformbtn.onclick = function() {
    var getform = document.getElementById("formdiv");
    getform.style.display = "block";
    document.getElementById("inputContainer").style.border="1px solid black"; /* delete this line to remove border. */
  }

  /* the button used to add dish after fill the form */
  var addbtn = document.getElementById("btnadd");
  addbtn.onclick = function() {

    var dishname = document.getElementById("dishname").value;
    var storename = document.getElementById("storename").value;
    var rating = document.getElementById("rating").value;
    var feedback = document.getElementById("feedback").value;

    var error1 = document.getElementById("error1");
    var error2 = document.getElementById("error2");
    var error3 = document.getElementById("error3");
    var error4 = document.getElementById("error4");


    /* set a boolean to check and prevent empty input */
    let noError = true;

    /* check empty logic */
    if (dishname === "") {
      error1.innerHTML = "Please input again!";
      error1.style.color = "red";
      document.getElementById("dishname").focus();
      noError = false;
      return false;
    } else {
      error1.innerHTML = "";
    }

    if (storename === "") {
      error2.innerHTML = "Please input again!";
      error2.style.color = "red";
      document.getElementById("storename").focus();
      noError = false;
      return false;
    } else {
      error2.innerHTML = "";
    }

    if (rating == 0) {
      error3.innerHTML = "Please choose a rating";
      error3.style.color = "red";
      document.getElementById("rating").focus();
      noError = false;
      return false;
    } else {
      error3.innerHTML = "";
    }

    if (feedback === "") {
      error4.innerHTML = "Please input again!";
      error4.style.color = "red";
      document.getElementById("feedback").focus();
      noError = false;
      return false;
    } else {
      error4.innerHTML = "";
    }


    /* if no empty input, then add our input into the list */
    if (noError = true) {

      itemNo = itemNo + 1;
      var ele1 = document.createElement("p");
      ele1.innerText = itemNo;
      ele1.classList.add("list");
      ele1.setAttribute("id", itemNo);
      document.getElementById("num").appendChild(ele1);

      var ele2 = document.createElement("p");
      ele2.innerText = dishname;
      ele2.setAttribute("id", itemNo + "dish");
      ele2.classList.add("list");
      document.getElementById("dish").appendChild(ele2);

      var ele3 = document.createElement("p");
      ele3.innerText = storename;
      ele3.setAttribute("id", itemNo + "store");
      ele3.classList.add("list");
      document.getElementById("store").appendChild(ele3);

      var ele4 = document.createElement("p");
      ele4.innerText = rating;
      ele4.setAttribute("id", itemNo + "rating");
      ele4.classList.add("list");
      document.getElementById("rate").appendChild(ele4);

      var ele5 = document.createElement("p");
      ele5.innerText = feedback;
      ele5.setAttribute("id", itemNo + "feedback");
      ele5.classList.add("list");
      document.getElementById("fb").appendChild(ele5);

      var ele6 = document.createElement("p");
      ele6.innerText = todaystring;
      ele6.setAttribute("id", itemNo + "date");
      ele6.classList.add("list");
      document.getElementById("date").appendChild(ele6);


      /* clear the form after add each row */
      document.getElementById("dishname").value = "";
      document.getElementById("storename").value = "";
      document.getElementById("rating").value = 0;
      document.getElementById("feedback").value = "";


      return false;

    }
  }

  /* remove button function */
  var removebtn = document.getElementById("btn3");
  removebtn.onclick = function() {

    var rm1 = document.getElementById(itemNo);
    rm1.remove();

    var rm2 = document.getElementById(itemNo + "dish");
    rm2.remove();

    var rm3 = document.getElementById(itemNo + "store");
    rm3.remove();

    var rm4 = document.getElementById(itemNo + "rating");
    rm4.remove();

    var rm5 = document.getElementById(itemNo + "feedback");
    rm5.remove();

    var rm6 = document.getElementById(itemNo + "date");
    rm6.remove();

    itemNo = itemNo - 1;

  }


  /* clear button function */
  var clearbtn = document.getElementById("btn2");
  clearbtn.onclick = function() {
    location.reload();
  }


  /* end window.onload function */
}
    body {
  margin: 0;
  padding: 0;
}

.header {
  display: flex;
  flex-direction: row;
  background-color: #face77;
}

.button {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 18px;
  padding-right: 18px;
  background-color: #face77;
  font-weight: bold;
  font-size: 16px;
  border: transparent;
}

.btnfield {
  position: absolute;
  left: 65%;
}

.hardcoded {
  display: flex;
  flex-direction: row;
  gap: 80px;
  margin-left: 150px;
  margin-top: 25px;
}

.list {
  margin-bottom: 5px;
  margin-top: 10px;
  margin-left: 25px;
}

.inputform {
  position: relative;
  top: 75%;
  left: 15%;
  display: none;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

footer {
  margin-top: 200px;
  position: relative;
  bottom: 0;
  left: 2%;
}

.inputcls{
width:80%;
}
    <div class="header">
  <h2 style="margin-left: 40px">DISH DAIRY</h2>
  <img style="width: 55px; height: 55px;margin-left: 20px;margin-top: 8px" src="./images/Meal.png" alt="icon">
  <p style="margin-left: 50px; font-size: 18px; margin-top: 22px;">Your Personal Food Log</p>
</div>

<h1 style="margin-left: 40px">Welcome!</h1>

<div class="btnfield">
  <button class="button" id="btn1">Add Dish</button>
  <button class="button" id="btn2">Clear All</button>
  <button class="button" id="btn3">Remove Dish</button>
</div>

<div>
  <p style="margin-top:100px; margin-left: 100px"><em>Show My Favourite and Dislike:</em></p>
</div>

<div align="center" style="width:100%"> <!-- div added -->

<div class="hardcoded">

  <div id="num">
    <p>Item No.</p>
    <p class="list">1</p>
    <p class="list">2</p>
    <p class="list">3</p>
  </div>

  <div id="dish">
    <p style="margin-left:25px">Dish Name</p>
    <p class="list">CoconutStickyRice MiniCake</p>
    <p class="list">TaroUbe MiniCake</p>
    <p class="list">Icy Taro Ball B</p>
  </div>

  <div id="store">
    <p style="margin-left:25px">Store Name</p>
    <p class="list">LA LA Bakeshop</p>
    <p class="list">LA LA Bakeshop</p>
    <p class="list">Meet Fresh</p>
  </div>

  <div id="rate">
    <p style="margin-right:5px;">Rating out of 5</p>
    <p class="list">5</p>
    <p class="list">5</p>
    <p class="list">5</p>
  </div>

  <div id="fb">
    <p style="margin-left: 25px;">Feedback</p>
    <p class="list">so good</p>
    <p class="list">awesome</p>
    <p class="list">amazing</p>
  </div>

  <div id="date">
    <p style="margin-left:24px">Date</p>
    <p class="list">2024/10/18</p>
    <p class="list">2024/11/01</p>
    <p class="list">2024/12/02</p>
  </div>

</div>

<div align="left" id="inputContainer" style="width:40%;padding:8px;margin:12px;border-radius:18px;">

<div class="inputform" id="formdiv">
  <form class="form" id="form">
    Dish Name:
    <input class="inputcls" type="text" id="dishname">
    <span id="error1"></span> Store Name:
    <input class="inputcls" type="text" id="storename">
    <span id="error2"></span> Rating Out Of 5:
    <select class="inputcls" name="rating" id="rating">
      <option value="0">-- Choose your rating --</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
    </select>
    <span id="error3"></span> Feedback:
    <input class="inputcls" type="text" id="feedback">
    <span id="error4"></span>
    <button type="submit" id="btnadd" style="font-weight: bold; font-size: 16px; margin-left:45px; margin-top: 15px; padding-top: 10px; padding-bottom: 10px; background-color:#face77;max-width: 70px; border:transparent">Add</button>
  </form>
</div></div>

</div>

<footer>
  <p style="font-size: 12px;">Copyright &copy; 2024 All Right Reserved</p>
</footer>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search