Issue
I am trying to create a simple email generator to use internally. they get updated relatively often and the main thing that changes is the image.
I am trying to create a form using javascript and take the user input and create the signature block that they can copy and paste into where ever it is that they need it.
I am a novice when it comes to javascript and haven't touched css in about 10 years.
i keep trying to input the fields into the html, but can't seem to figure out what exactly it is that i need to do.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script language="JavaScript">
function showInput() {
document.getElementById('display').innerHTML =
document.getElementById("user_input").value;
}
</script>
</head>
<body>
<form>
<label><b>Name</b></label>
<input type="text" name="name" id="name">
<label><b>Title</b></label>
<input type="text" name="title" id="title">
<label><b>Number</b></label>
<input type="text" name="number" id="number">
<label><b>Email</b></label>
<input type="text" name="email" id="email">
<input type="submit" onclick="showInput();"><br/>
<label>Your input: </label>
<p><span id='display'></span></p>
</form><br>
<table style="width:525px; font-size:10pt; font-family:Arial, sans-serif;" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="font-size:10pt; width:180px; padding-right:10px; vertical-align:middle;" valign="middle">
<p style="margin-bottom:25px; line-height:1.2">
<strong><span
style="font-size:12pt; font-family:Arial, sans-serif; color:#000000">document.getElementById("name").value}</span></strong><br>
<span
style="font-family:Arial, sans-serif; font-size:12pt; color:#515151;"><em><strong>{title}</strong></em></span><br><br>
<span style="font-family:Arial, sans-serif; font-size:12pt; color:#000000;">{number}</span><br>
<span style="font-family:Arial, sans-serif; font-size:12pt; color:#000000;">{email}</span><br>
</p>
</td>
<td style="font-family:Arial, sans-serif; padding-left:15px; vertical-align:top; line-height:1.2; border-left:solid 2px #000000"
valign="top">
<a href="https://www.company.com/" target="_blank" rel="noopener"
style="text-decoration:none;"><img src="Picture1.jpg" alt="company"
style="height:auto; border:0;"></a>
</td>
</tr>
</tbody>
</table>
</body>
</html>```
Solution
There are three ways you can use to implement CSS into your HTML: internal, external, and inline styles.
- Internal - requires you to add tag in the section of your HTML document.
This CSS style is an effective method of styling a single page. However, using this style for multiple pages is time-consuming as you need to put CSS rules on every page of your website.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: blue;
}
h1 {
color: red;
padding: 60px;
}
</style>
</head>
<body>
<h1>example h1</h1>
<p>example p.</p>
</body>
</html>External - CSS, you’ll link your web pages to an external .css file. you can achieve this by doing the following: in the section of your HTML sheet, add a reference to your external .css file right after tag.
Inline - used to style a specific HTML element. For this CSS style, you’ll only need to add the style attribute to each HTML tag, without using selectors.
More about those 3 types of css use can be found here
Answered By - Ran Turner
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.