Board styling - New Writing and Sign up form

New Writing form

Open the view.html and use the Save As editor menu to create a write.html. Clear the existing contents of the #content of write.html and paste the following code instead.

<div id="content-categories">Chat</div>
<h3>New</h3>
<form id="writeForm" action="write_proc.jsp" method="post" enctype="multipart/form-data">
<input type="hidden" name="boardCd" value="chat" />
<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%;
}

Styling #extra

Save the following images in images folder.

Add the following to #extra of write.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 all of /*** 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;
}

Sign up form

Open the write.html and use the Save As editor menu to create a signUp.html. Clear the existing contents of the #content of signUp.html and paste the following code instead.

<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>

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

Final Sources