Question

我正在尝试创建一个部分，其中用户通过表单提交的信息显示为字幕！

我不知道该使用什么来实现这一目标？

以下是表单的代码：

html, body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: grey; 
}

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.marquee-section {
  max-width:100%;
  max-height: 100%;
  height: 300px;
  position:relative;
  background-color: #ef6;
  padding: 10px 20px;
}

.marquee-heading {
  font-size: 28px;
  font-weight: 600;
  text-align: center;
}

.marquee-info {
  max-width:600px;
  width:100%;
  margin:0 auto;
  padding: 0 10px;
  float: left;
  position: relative;
}


.contact-section {
  max-width:100%;
  max-height: 100%;
  height: 580px;
  position:relative;
  background-color: #fff;
  padding: 10px 20px;
}

.contact-heading {
  font-size: 28px;
  font-weight: 600;
  text-align: center;
}

.contactForm {
  max-width:600px;
  width:100%;
  margin:0 auto;
  padding: 0 10px;
  float: left;
  position: relative;
}



#contact input[type="text"], #contact input[type="email"], #contact textarea, #contact button[type="submit"] { font:400 50px/16px "Raleway", Helvetica, Arial, sans-serif; }

#contact {
  padding:10px;
  margin:5px 0;
}

#contact h3 {
  color: #F96;
  display: block;
  font-size: 50px;
  font-weight: 400;
}

#contact h4 {
  margin:5px 0 15px;
  display:block;
  font-size:13px;
}

fieldset label {
  font-size: 16px;
  font-weight: 500;
}

fieldset {
  border: medium none !important;
  margin: 0 0 10px !important;
  min-width: 100%;
  padding: 0;
  width: 100%;
}

#contact input[type="text"], #contact input[type="email"], #contact textarea {
  width:100%;
  max-width:700px;
  border-style: solid;
  border-color: #afafaf;
  border-width: 1px;
  border-radius: 5px;
  margin-bottom: 5px;
  background-color: rgba(255, 255, 255, 0.7);
  
  padding: 10px;
  height: 45px;
  font-size: 0.8em;
  line-height: 1.2em;
  color: #111;
  position: relative;
}

#contact input[type="text"]:hover, #contact input[type="email"]:hover, #contact textarea:hover {
	-webkit-transition:border-color 0.3s ease-in-out;
	-moz-transition:border-color 0.3s ease-in-out;
	transition:border-color 0.3s ease-in-out;
	border:1px solid #4872bc;
}

#contact textarea {
  height:180px;
  max-width:100%;
  resize:none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
}

#contact button[type="submit"] {
  cursor:pointer;
  margin:0 0 5px;
  padding: 10px;
  height: 45px;
  width: 100%;
  max-width: 150px;
  color: #282626;
  font-size: 16px;
  font-weight: 600;
  border-style: solid;
  border-color: #878787;
  border-width: 1px;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0);
}

#contact button[type="submit"]:hover {
  background-color: rgba(255, 255, 255, 0.3);
	-webkit-transition:background 0.3s ease-in-out;
	-moz-transition:background 0.3s ease-in-out;
	transition:background-color 0.3s ease-in-out;
}

#contact button[type="submit"]:active { box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.5); }

#contact input:focus, #contact textarea:focus {
  outline:0;
  border:1px solid #999;
}
::-webkit-input-placeholder {
 color:#878787;
}
:-moz-placeholder {
 color:#878787;
}
::-moz-placeholder {
 color:#878787;
}
:-ms-input-placeholder {
 color:#878787;
}

<div class="marquee-section">
  <h1 class="marquee-heading">Opinions:</h1>
  <div class="marquee-info">
    <marquee><span>Climate chnage is real by <a href="#">Wallace C.</a></span></marquee>
  </div>
</div>

<div class="contact-section">
  <h1 class="contact-heading">Type the info here!</h1>
  <div class="contactForm">
    <form id="contact">
      <fieldset>
        <label for="name">Name</label>
        <input name="name" type="text">
      </fieldset>
      <fieldset>
        <label for="name">Email</label>
        <input name="email" type="text">
      </fieldset>
      <fieldset>
        <label for="name">Opinion</label>
        <textarea name="message" rows="4" cols="50"></textarea>
      </fieldset>
      <fieldset>
        <center><button name="submit" type="submit">Submit</button></center>
      </fieldset>
    </form>
  </div>

</div>

我希望提交后的表单信息显示在“字幕区”的“字幕信息”中

Answer 1

您需要一种全新的方法。 <marquee>和<center>已过时，您甚至不应该使用form，因为您不在任何地方提交数据，并且有成千上万不必要的CSS。您还没有正确使用label元素--for属性值必须与id是“ for”元素的label匹配，而不是{{ 1}}属性值。

您只需要一个带有name事件处理程序的文本框和一个常规按钮。然后，您将使用JavaScript修改计时器上的click CSS属性。查看内联评论：

left

// Get references to all the DOM elements you'll work with
let output = document.querySelector(".output");
let email = document.getElementById("email");
let message = document.getElementById("message");

let timer = null; // Will reference timer

// Set up button click event handler
document.querySelector("button").addEventListener("click", move);

function move(){

  clearTimeout(timer); // Prevent multiple timers
  
  // Get current left position of output
  let currentLeft = parseInt(getComputedStyle(output).left, 10);
  
  // If output is off the screen, move it to the right.
  // If not, move it 3px to the left
  let outputWidth = parseInt(getComputedStyle(output).width, 10);
  if(currentLeft < (0 - outputWidth)){
    currentLeft = window.innerWidth;
  } else {
    currentLeft -= 3;
  }
  
  // Update and Move the output
  output.textContent = message.value;
  output.style.left = currentLeft + "px";
  
  // Create a timer to recursively call this function
  timer = setTimeout(move, 25);

}

html, body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

*, *:after, *:before {
  box-sizing: border-box;
}

.marquee-section {
  max-width:100%;
  max-height: 100%;
  height: 300px;
  background-color: #ef6;
  padding: 10px 20px;
}

.marquee-heading {
  font-size: 28px;
  font-weight: 600;
  text-align: center;
}

.marquee-info {
  width:100%;
  max-width:600px;
  margin:0 auto;
  padding: 0 10px;
}

.output { position:absolute; }

.contact-section {
  max-width:100%;
  max-height: 100%;
  height: 580px;
  padding: 10px 20px;   
}

.contact-heading {
  font-size: 28px;
  font-weight: 600;
  text-align: center;
}

.contactForm {
  max-width:600px;
  width:100%;
  padding:10px;
  margin:5px 0;
}

.contactForm input[type="text"], #contact input[type="email"], .contactForm textarea, #contact button[type="submit"] { font:400 50px/16px "Raleway", Helvetica, Arial, sans-serif; }

label {
  font-size: 16px;
  font-weight: 500;
}

.contactForm input, .contactForm input[type="email"], .contactForm textarea {
  width:100%;
  max-width:700px;
  border-style: solid;
  border-color: #afafaf;
  border-width: 1px;
  border-radius: 5px;
  margin-bottom: 5px;
  background-color: rgba(255, 255, 255, 0.7);
  padding: 10px;
  height: 45px;
  font-size: 0.8em;
  line-height: 1.2em;
  color: #111;
}

.contactForm input:hover, #contact input[type="email"]:hover, .contactForm textarea:hover {
	transition:border-color 0.3s ease-in-out;
	border:1px solid #4872bc;
}

.contactForm textarea {
  height:180px;
  max-width:100%;
  resize:none;
  width: 100%;
}

.contactForm button {
  cursor:pointer;
  margin:0 0 5px;
  padding: 10px;
  height: 45px;
  width: 100%;
  max-width: 150px;
  color: #282626;
  font-size: 16px;
  font-weight: 600;
  border-width: 1px solid #878787;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0);
}

.contactForm button:hover {
  background-color: rgba(255, 255, 255, 0.3);
	transition:background-color 0.3s ease-in-out;
}

.contactForm button:active { box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.5); }

.contactForm input:focus, .contactForm textarea:focus {
  outline:0;
  border:1px solid #999;
}
::-webkit-input-placeholder { color:#878787; }
:-moz-placeholder { color:#878787; }
::-moz-placeholder { color:#878787; }
:-ms-input-placeholder { color:#878787; }

提交后如何使表格显示字幕？

1 个答案: