2
Je me suis cogné la tête depuis hier mais en vain. Ce que je dois faire est de faire un formulaire et afficher des cartes de vœux personnalisées. Nous sommes autorisés à utiliser des images comme des cartes (définissez-les comme arrière-plan pour la sortie). Le formulaire doit permettre à l'utilisateur d'entrer certaines informations de personnalisation telles que le nom du destinataire, les informations de couleur, les tailles de police et autres informations que vous souhaitez. Il devrait y avoir un bouton "make card" qui, quand ils le frappent, cache le formulaire (en changeant la visibilité CSS ou la propriété d'affichage de l'élément correspondant) et montre une carte, avec un design simple mais élégant qui incorpore le texte d'autres détails de configuration qu'ils ont entrés.Comment afficher le formulaire de sortie dans la même fenêtre et masquer le formulaire ainsi
Aussi j'ai besoin d'avoir l'image de fond selon leur sélection dans le type de carte de voeux et avoir une petite image de taille d'autocollant sur la carte pour les caractères qu'ils choisissent.
Toute aide serait grandement appréciée.
Ce qui suit est mon CSS Java Script et HTML code:
<script>
function selectAll() {
for (i = 0; i < document.forms[0]['charac'].length - 1; i++)
document.forms[0]['charac'][i].checked = document.forms[0]['charac'][5].checked;
}
document.forms[0]['charac'][5].addEventListener('click', selectAll);
function myCard() {
document.getElementById("formOutput").style.backgroundImage = "url('birthday-card.jpg')";
var selected;
if (selected == document.forms[0]['card'][0]) {
document.body.style.backgroundImage = "url('birthday-card.jpg')";
document.getElementById("formOutput").innerHTML = "name";
}
}
function myFunction() {
var a = document.getElementById("txtName").value;
var b = document.getElementById("txtName1").value;
var c = document.getElementById("content-field").value;
document.getElementById("formOutput").innerHTML = a + " " + b + " " + c;
} < /script><style> #wrapper {
border: 3px black;
}
body {
background-image: url("blank-card1.jpg");
background-size: cover;
background-repeat: no-repeat;
text-align: center;
}
table {
/* background-image: image("blank-card.jpg");*/
text-align: center;
margin-left: auto;
margin-right: auto;
}
table td {
height: 15px;
/* width: 15px;*/
text-align: left;
}
</style><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Generate a Greeting Card</title>
</head>
<body>
<h3>Fill out the following information and select a card to view how it looks.</h3>
<form id="formCard" action="">
<fieldset>
<legend>Personal information:</legend>
<table>
<tr>
<td>
<label for="txtName">Your Name<span style="color:red">*</span>
</label>
</td>
<td>
<input type="text" id="txtName" name="name" value=" " required/>
</td>
</tr>
<tr>
<td>
<label for="txtName1">Your Family Member's
<br>OR Friend's Name<span style="color:red">*</span>
</label>
</td>
<td>
<input type="text" id="txtName1" name="name1" value=" " required/>
</td>
</tr>
<tr>
<td>
<label for="txtAddress">Address</label>
</td>
<td>
<input type="text" id="txtAddress" name="address" value=" ">
</td>
</tr>
<tr>
<td>
<label for="postalCode">Postal Code<span style="color:red">*</span>
</label>
</td>
<td>
<input type="text" id="postalCode" name="postalcode" value=" " required/>
</td>
</tr>
<tr>
<td>Province<span style="color:red">*</span>
</td>
<td>
<select id="selProvince" name="province" required>
<option value="" selected>Please select...</option>
<option value="AB">Alberta</option>
<option value="BC">British Columbia</option>
<option value="MB">Manitoba</option>
<option value="NB">New Brunswick</option>
<option value="NFL">Newfoundland and Labrador</option>
<option value="NW">Northwest Territories</option>
<option value="NS">Nova Scotia</option>
<option value="NU">Nunavut</option>
<option value="ON">Ontario</option>
<option value="PEI">Prince Edward Island</option>
<option value="QC">Quebec</option>
<option value="SK">Saskatchewan</option>
<option value="YK">Yukon</option>
</select>
</td>
</tr>
<tr>
<td>
<label for="txtPhone">Phone<span style="color:red">*</span>
</label>
</td>
<td>
<input type="text" id="txtPhone" name="phone" value=" " required/>
</td>
</tr>
<tr>
<td>
<label for="txtEmail">Email<span style="color:red">*</span>
</label>
</td>
<td>
<input type="text" id="txtEmail" name="email" required/>
</td>
</tr>
<tr>
<td>Would you like to send it
<br>via email or mail<span style="color:red" required>*</span>
</td>
<td>
<label>
<input type="radio" name="route" value="m" />Mail</label>
<label>
<input type="radio" name="route" value="e" />Email</label>
</td>
</tr>
<tr>
<td>Type of Greeting Card:<span style="color:red">*</span>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</td>
<td>
<br>
<label>
<input type="radio" name="card" id="birthday" value="bd" />Birthday</label>
<br>
<label>
<input type="radio" name="card" id="valentine" value="vd" />Valentines Day</label>
<br>
<label>
<input type="radio" name="card" id="friendship" value="frd" />Friendship Day</label>
<br>
<label>
<input type="radio" name="card" id="mother" value="md" />Mother's Day</label>
<br>
<label>
<input type="radio" name="card" id="father" value="fad" />Father's Day</label>
<br>
<label>
<input type="radio" name="card" id="newYear" value="nyd" />New Year's Day</label>
<br>
<label>
<input type="radio" name="card" id="christmas" value="cd" />Christmas Day</label>
<br>
<br>
</td>
</tr>
<tr>
<td>Choose the person's
<br>Favourite cartoon charcters:<span style="color:red">*</span>
<br>
<br>
<br>
<br>
<br>
</td>
<td>
<label>
<input type="checkbox" name="charac" value="mickeyMouse" checked/>Mickey Mouse & Clubhouse</label>
<br>
<label>
<input type="checkbox" name="charac" value="scoobyDoo" />Scooby Doo</label>
<br>
<label>
<input type="checkbox" name="charac" value="tomJerry" />Tom & Jerry</label>
<br>
<label>
<input type="checkbox" name="charac" value="tweetiePie" />Tweetie Pie</label>
<br>
<label>
<input type="checkbox" name="charac" value="donaldDuck" />Donald Duck</label>
<br>
<label>
<input type="checkbox" name="charac" value="selectAll" />Select All</label>
</td>
</tr>
<tr>
<td>Choose a colour for the
<br>text on the card:</td>
<!--color code from w3schools.org-->
<td>
<input type="color" id="html5colorpicker" onchange="clickColor(0, -1, -1, 5)" value="#ff0000" style="width:85%;">
</td>
</tr>
<tr>
<td>
<label>Content</label>
</td>
<td>
<textarea id="content-field" cols="20" rows="2" value=" "></textarea>
</td>
</tr>
<tr>
<td>Choose an image to put on
<br>the card to make it special.</td>
<td>
<label>
<input type="file" name="pic" accept="image/*">
</label>
</td>
</tr>
<tr>
<td> </td>
<td>
<br>
<br>
<input onclick="myFucntion()" type="submit" value="SEND" />
<input type="reset" value="CLEAR" />
</td>
<td> </td>
</tr>
</table>
</fieldset>
</form>
<p><span id="formOutput"></span>
</p>
</body>
</html>
Le bouton SEND est-il l'équivalent du bouton "make card" dont vous parlez dans la question? – ConnorsFan
oui c'est la même chose – Ash