Question

我想制作一个HTML表单，以淘汰格式化的电子邮件签名。

我想要输出 1）分隔线和 2）使每一行具有唯一的格式。因此，第一行是粗体和蓝色，第二行是非粗体和灰色字体，等等，例如典型的电子邮件签名。到目前为止，所有内容都出现在一个长且格式相同的输出中。
最终，我希望省略空白条目并添加自动复制功能，但是稍后我可以解决这些问题。

在此上花费了几十个小时而无法获得，因此希望获得一些指导。

<!DOCTYPE html>
    <html lang = "en-US">
    <title>Email Signature</title>
    <head>
    <body>
    <font face="century gothic">
    <h3>Creating Signature</h3>
    <p>Enter you information<p>      
    <form>
    Name<br>
    <input type="text" name="wholename" ><br>
    <br>Position</br>
    <input type="text" name="pos"><br>
    <br>Position 2</br>
    <input type="text" name="pospos"><br>
    <br>Phone 1</br>
    <input type="text" name="phone"><br>
    <br>Phone 2</br>
    <input type="text" name="phonephone"><br>     
    <p>Select Location<p>    
    	<input type="radio" name="location" value="Redding" checked>Redding<br>
    	<input type="radio" name="location" value="San Francisco" checked> San Francisco<br>
    	<input type="radio" name="location" value="Woodland Hills" checked> Los Angeles<br><br>  	
    <input type="checkbox" name="billingtoo" onclick="FillBilling(this.form)">
    <em>Check this box when you're all set</em>
    <p>   
    <b>Your Custom Signature:</b><br><br>
    <textarea type="textarea" id="billingname" style="font-family:century gothic;font-size:1.2em;color:rgb(126,128,130)" rows="10" cols="40" ></textarea><br> 
    <script type="text/javascript">
    function copyText(){
     document.getElementById("billingname").select();
     document.execCommand('copy');
    }
    function FillBilling(f) {
    f.billingname.value = 
    		f.wholename.value  + " " +	f.pos.value + " | " + f.pospos.value + "" + f.phone.value + "  " + f.phonephone.value + "  " + f.location.value;}
      if(f.billingtoo.checked == true) {}
    </script> 
    </form>
    <br><br><br><br>
    </font face>
    </head>
    </body>
    </html>

Answer 1

我认为您不希望使用<textarea>，因为这不允许您在签名中使用多种格式。尝试将<div>与单独的<p>标签一起使用，例如：

<!DOCTYPE html>
    <html lang = "en-US">
    <title>Email Signature</title>
    <head>
    <body>
    <font face="century gothic">
    <h3>Creating Signature</h3>
    <p>Enter you information<p>      
    <form>
    Name<br>
    <input type="text" name="wholename" value="John Doe"><br>
    <br>Position</br>
    <input type="text" name="pos" value="Systems Engineer"><br>
    <br>Position 2</br>
    <input type="text" name="pospos" value="Senior Manager"><br>
    <br>Phone 1</br>
    <input type="text" name="phone" value="(123)-456-7890"><br>
    <br>Phone 2</br>
    <input type="text" name="phonephone" value="(123)-456-7890"><br>     
    <p>Select Location<p>    
    	<input type="radio" name="location" value="Redding" checked>Redding<br>
    	<input type="radio" name="location" value="San Francisco" checked> San Francisco<br>
    	<input type="radio" name="location" value="Woodland Hills" checked> Los Angeles<br><br>  	
    <input type="checkbox" name="billingtoo" onclick="FillBilling(this.form)">
    <em>Check this box when you're all set</em>
    <p>   
    <b>Your Custom Signature:</b><br><br>
    <div id="billingname" style="width: 400px; height: 300px; border: solid black 2px;">
    	<b id="wholename" style="margin:0; line-height:14px; display:inline-block; color:#245996"></b>
        <p id="pos" style="margin:0; line-height:14px; display:inline-block; color:#245996"></p>
        <p id="pospos" style="margin:0; line-height:14px; display:inline-block; color:#245996"></p>
        <p id="phone" style="margin:0; line-height:14px; color:grey"></p>
        <p id="phonephone" style="margin:0; line-height:14px; color:grey"></p>
        <p id="location" style="margin:0; line-height:14px; color:grey"></p>
    
    </div>
    <br> 
    <script type="text/javascript">
    function copyText(){
     document.getElementById("billingname").select();
     document.execCommand('copy');
    }
    function FillBilling(f) {
      document.getElementById("wholename").innerHTML = f.wholename.value + " ";
      document.getElementById("pos").innerHTML = f.pos.value + " | ";
      document.getElementById("pospos").innerHTML = f.pospos.value;
      document.getElementById("phone").innerHTML = f.phone.value;
      document.getElementById("phonephone").innerHTML = f.phonephone.value;
      document.getElementById("location").innerHTML = f.location.value;
      }
      //if(f.billingtoo.checked == true) {}
    </script> 
    </form>
    <br><br><br><br>
    </font face>
    </head>
    </body>
    </html>

如果您对代码有任何疑问，或者我误解了您想要的内容，请告诉我。

快乐编码！

HTML表单输出格式（使用JavaScript）

1 个答案: