Board styling - Write and Sign up

Write form

Open the view.html file and use the 'Save As' menu to create the write.html file.
Clear the existing contents of the #content element and paste the following code.

<div id="content-categories">Small Talk</div>
<h3>New</h3>
<form id="writeForm" action="write_proc.jsp" method="post" enctype="multipart/form-data">
<input type="hidden" name="boardCd" value="free" />
<table id="write-form" class="bbs-table">
<tr>
	<td>Title</td>
	<td><input type="text" name="title" style="width: 90%;" /></td>
</tr>
<tr>
	<td colspan="2">
		<textarea name="content" rows="17" cols="50"></textarea>
	</td>
</tr>
<tr>
	<td>Attach File</td>
	<td><input type="file" name="attachFile" /></td>
</tr>
</table>
<div style="text-align: center;padding-bottom: 15px;">
	<input type="submit" value="Submit" />
	<input type="button" value="Cancel" />
	<input type="button" value="List" />
</div>
</form>
[CSS]
#write-form td {
	border: none;
}
#write-form textarea {
	width: 99%;
}

New Article page after

#extra Styling

Save the following images in images folder.

  1. youtube
  2. gmail
  3. google drive
  4. gcp

Add the following to #extra in write_from.html.

<div id="extra">
	<a href="http://www.youtube.com"><img src="images/youtube.png" alt="youtube" /></a>
	<a href="http://gmail.com"><img src="images/gmail.gif" alt="gmail" /></a>
	<a href="http://drive.google.com"><img src="images/google-drive.png" alt="google drive" /></a>
	<a href="https://cloud.google.com/"><img src="images/gcp-logo.png" alt="google cloud" /></a>
</div>

Delete the entire /*** Just for Looks ***/.

[CSS]
#extra img {
	width: 203px;
}
#extra a {
	display: block;
	border: 1px solid #DAEAAA;
	margin-bottom: 7px;
}
#extra a:hover {
	opacity: 0.7;
}

New Article Form

Sign up

Open the write.html file and use the 'Save As' menu to create the signUp.html file.
Clear the existing contents of the #content element and paste the following code.

<div id="content-categories">Membership</div>
<h3>SignUp</h3>
<form id="signUpForm" action="signUp_proc.jsp" method="post">
<table>
<tr>
	<td style="width: 200px;">Full Name</td>
	<td style="width: 390px;"><input type="text" name="name" /></td>
</tr>
<tr>
	<td>Password</td>
	<td><input type="password" name="passwd" /></td>
</tr>
<tr>
	<td colspan="2" style="text-align: center;font-weight: bold;">
	Do not make the password the same as your email account password because Email is used as an ID.
	</td>
</tr>
<tr>
	<td>Confirm</td>
	<td><input type="password" name="confirm" /></td>
</tr>
<tr>
	<td>Email</td>
	<td><input type="text" name="email" /></td>
</tr>
<tr>
	<td>Mobile</td>
	<td><input type="text" name="mobile" /></td>
</tr>
</table>
<div style="text-align: center;padding-bottom: 15px;">
	<input type="submit" value="Submit" />
</div>
</form>

New Article form Screen

We will create a website with the final design created here in the next chapter 'JSP Project'.

Final Sources