Page 1 of 1

HTML content generator

Posted: Wed Feb 05, 2003 9:42 am
by pinkygal
hi,
i am currently building a page that enable user to enter the relevant content of the page and the system will also allow user to select the relevant formatting for the content such as document format, font format, and paragraph formats. How can I let the user preview their selections? must I use switch? if so how to?

<html>
<head>
<title> Form </title>
</head>
<body>
<table>
<form method="POST" action="result.php">
<tr>
<td>
Background Color:
</td>

<td>
<select name="bcolour" size="1">
<option value=""SELECTED>Select One</option>
<option value="Black">Black</option>
<option value="Dark Grey">Dark Grey</option>
<option value="Light Grey">Light Grey</option>
<option value="White">White</option>
<option value="Red">Red</option>
<option value="Green">Green</option>
<option value="Blue">Blue</option>
<option value="Yellow">Yellow</option>
<option value="Light Blue">Light Blue</option>
<option value="Purple">Purple</option>
</select>
</td>
</tr>
<tr>
<td>
Title:
</td>

<td>
<input type="text" name="Title" size="20">
</td>
</tr>
<td>
Font size:
</td>

<td>
<select name="fsize" size="1">
<option value=""SELECTED>Select One</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>
<option value="6">6</option>
<option value="7">7</option>
</select>
</td>
</tr>

<tr>
<td>
Font colour:
</td>
<td>
<select name="Fcolor" size="1">
<option value=""SELECTED>Select One</option>
<option value="#000000">Black</option>
<option value="#666666">Dark Grey</option>
<option value="#999999">Light Grey</option>
<option value="#FFFFFF">White</option>
<option value="#FF0000">Red</option>
<option value="#00FF00">Green</option>
<option value="#0000FF">Blue</option>
<option value="#FFFF00">Yellow</option>
<option value="#0000FF">Light Blue</option>
<option value="#FF00FF">Purple</option>
</select>
</td>
</tr>
<tr>
<td>
Font Face:
</td>

<td>
<select name="Fface" size="1">
<option value=""SELECTED>Select One</option>
<option value="Arial">Arial</option>
<option value="Century Gothic">Century Gothic</option>
<option value="Comic Sans MS">Comic Sans MS</option>
<option value="Courier New">Courier New</option>
<option value="Georgia">Georgia</option>
<option value="Times New Roman">Times New Roman</option>
<option value="Verdana">Verdana</option>
</select>
</td>
</tr>

<td>
Alignment:
</td>

<td>
<select name="Alignment" size="1">
<option value=""SELECTED>Select One</option>
<option value="left">Left</option>
<option value="centre">Centre</option>
<option value="right">Right</option>
</select>
</td>
</tr>

<tr>
<td>
Description:
</td>

<td>
<textarea name="Description" row="100" column="10"></textarea>
</td>
</tr>
<tr>
<td>
Font size:
</td>
<td>
<select name="Fsize1" size="1">
<option value=""SELECTED>Select One</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>
<option value="6">6</option>
<option value="7">7</option>
</select>
</td>
</tr>

<tr>
<td>
Font colour:
</td>

<td>
<select name="Fcolour1" size="1">
<option value=""SELECTED>Select One</option>
<option value="#000000">Black</option>
<option value="#666666">Dark Grey</option>
<option value="#999999">Light Grey</option>
<option value="#FFFFFF">White</option>
<option value="#FF0000">Red</option>
<option value="#00FF00">Green</option>
<option value="#0000FF">Blue</option>
<option value="#FFFF00">Yellow</option>
<option value="#0000FF">Light Blue</option>
<option value="#FF00FF">Purple</option>
</select>
</td>
</tr>

<tr>
<td>
Font Face:
</td>

<td>
<select name="Fface1" size="1">
<option value=""SELECTED>Select One</option>
<option value="Arial">Arial</option>
<option value="Century Gothic">Century Gothic</option>
<option value="Comic Sans MS">Comic Sans MS</option>
<option value="Courier New">Courier New</option>
<option value="Georgia">Georgia</option>
<option value="Times New Roman">Times New Roman</option>
<option value="Verdana">Verdana</option>
</select>
</td>
</tr>

<tr>
<td>
Alignment:
</td>

<td>
<select name="Alignment1" size="1">
<option value=""SELECTED>Select One</option>
<option value="left">Left</option>
<option value="centre">Centre</option>
<option value="right">Right</option>
</select>
</td>
</tr>


<tr>
<td>
Name of Author:
</td>

<td>
<input type="text" name="NUser" size="20">
</td>
</tr>

<tr>
<td>
Font size:
</td>

<td>
<select name="Fsize2" size="1">
<option value=""SELECTED>Select One</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>
<option value="6">6</option>
<option value="7">7</option>
</select>
</td>
</tr>

<tr>
<td>
Font colour:
</td>

<td>
<select name="Fcolour2" size="1">
<option value=""SELECTED>Select One</option>
<option value="#000000">Black</option>
<option value="#666666">Dark Grey</option>
<option value="#999999">Light Grey</option>
<option value="#FFFFFF">White</option>
<option value="#FF0000">Red</option>
<option value="#00FF00">Green</option>
<option value="#0000FF">Blue</option>
<option value="#FFFF00">Yellow</option>
<option value="#0000FF">Light Blue</option>
<option value="#FF00FF">Purple</option>
</select>
</td>
</tr>

<tr>
<td>
Font Face:
</td>
<td>
<select name="Fface2" size="1">
<option value=""SELECTED>Select One</option>
<option value="Arial">Arial</option>
<option value="Century Gothic">Century Gothic</option>
<option value="Comic Sans MS">Comic Sans MS</option>
<option value="Courier New">Courier New</option>
<option value="Georgia">Georgia</option>
<option value="Times New Roman">Times New Roman</option>
<option value="Verdana">Verdana</option>
</select>
</td>
</tr>

<tr>
<td>
Alignment:
</td>
<td>
<select name="Alignment2" size="1">
<option value=""SELECTED>Select One</option>
<option value="left">Left</option>
<option value="centre">Centre</option>
<option value="right">Right</option>
</select>
</td>
</tr>
</table>
<div align="center"><input type="submit" name="submit" value="submit"> <input type="reset" name="reset" value="clear">
</form></div>
<?php



?>
</body>
</html>

Posted: Wed Feb 05, 2003 10:30 am
by volka
after this page is transmitted to the client php will not take action again until then client performs a new request. Your form's action points to result.php. This script might decide which action to take, saving the changes or simply output a preview.

If you want to change the settings whenever the user changes a value I suggest using javascript with an onChange-event on the select-elements.
e.g.

Code: Select all

<html>
	<head>
		<script type="text/javascript">
		function changeColor()
		&#123;
			o = document.getElementById('colorSelect');
			o.style.color = o.value;
		&#125;
		</script>
	</head>
	<body>
		<select id="colorSelect" onChange="javascript: changeColor()">
			<option value="">default</option>
			<option value="red">red</option>
			<option value="blue">blue</option>
		</select>
	</body>
</html>