java web project--learning through building 1
Tue, Jan 12, 2021
2-minute read
a full-stack web application for users to understand java web system
- HTML/CSS
- form tag
- <em><strong>t1: design a form with head, 3 rows 3 cols with frame</strong></em>
- <em><strong>t2: modify the form width, height，format align, cellspacing</strong></em>
- <em><strong>5 row 5 col, the first row and col A cell can span 2 cols</strong></em>
- <em><strong>the second row first col cell spans 2 row, the forth row and forth col cell spans two rows and 2 cols</strong></em>
- form
HTML/CSS
超链接
form tag
t1: design a form with head, 3 rows 3 cols with frame
/**
* table
* border
* width
* align
* cellspacing
* tr row tag
* th from head tag
* td table space tag
*/
<table align="center" border="1" width="300" height="300" cellspacing="0">
<tr>
<th>1.1</th>
<th>1.2</th>
<th>1.3</th>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
</table>
t2: modify the form width, height，format align, cellspacing
5 row 5 col, the first row and col A cell can span 2 cols
the second row first col cell spans 2 row, the forth row and forth col cell spans two rows and 2 cols
/**
* table
* border
* width
* align
* cellspacing
* tr row tag
* th from head tag
* td table space tag
*/
<table align="center" border="1" width="300" height="300" cellspacing="0">
<tr>
<td colspan="2">1.1</td>
<td>1.3</td>
<td>1.4</td>
<td>1.5</td>
</tr>
<tr>
<td rowspan="2">2.1</td>
<td>2.2</td>
<td>2.3</td>
<td>2.4</td>
<td>2.5</td>
</tr>
<tr>
<td>3.2</td>
<td>3.3</td>
<td>3.4</td>
<td>3.5</td>
</tr>
<tr>
<td>4.1</td>
<td>4.2</td>
<td>4.3</td>
<td colspan="2" rowspan="2">4.4</td>
</tr>
<tr>
<td>5.1</td>
<td>5.2</td>
<td>5.3</td>
</tr>
</table>
form
t1: create a register form, inlucing the username, password, gender, hobbies(multiple), nations(roll down) hidden field
- form
- input type=text value (display default content)
- input type=password value
- input type=radio (single selection) name (for group) checked=“checked” (default selected)
- input type=checkbox (multiple selection) checked=“checked”
- input type=reset value
- input type=submit value
- input type=button value
- input type=file (used for uploading files)
- input type=hidden (hidden message for sending to service)
- select
- option selected=“selected"设置默认选中
- textarea
- rows
- cols
<body>
<form>
username：<input type="text" value="default"/><br/>
password：<input type="password" value="abc"/><br/>
password：<input type="password" value="abc"/><br/>
gender：<input type="radio" name="sex"/>male<input type="radio" name="sex" checked="checked" />female<br/>
hobbies：<input type="checkbox" checked="checked" />Java<input type="checkbox" />JavaScript<input
type="checkbox" />C++<br/>
nations：
<select>
<option>--please select your nation--</option>
<option selected="selected">China</option>
<option>U.S.</option>
<option>Japan</option>
</select><br/>
introduce yourself：<textarea rows="10" cols="20">xxxxx</textarea><br/>
<input type="reset" value="abc" />
<input type="submit"/>
</form>
</body>
