๐Ÿ’ป

HTML ์˜ ์ดํ•ด - ๊ทธ ์™ธ ํƒœ๊ทธ๋“ค(select/form/table) ๋ณธ๋ฌธ

KITRI/HTML

HTML ์˜ ์ดํ•ด - ๊ทธ ์™ธ ํƒœ๊ทธ๋“ค(select/form/table)

๋˜ํšจ๋‹ˆ 2020. 5. 28. 09:37

๊ทธ ์™ธ ํƒœ๊ทธ๋“ค

 

select ํƒœ๊ทธ

 

https://www.w3schools.com/tags/tag_select.asp

 

HTML select tag

HTML Tag Example Create a drop-down list with four options:

 

 

 

 

 

textarea ํƒœ๊ทธ

 

https://www.w3schools.com/tags/tag_textarea.asp

 

HTML textarea tag

HTML Tag Example A multi-line text input control (text area):

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>	
	<h3>๊ทธ์™ธ ํƒœ๊ทธ๋“ค</h3>
	<span>SELECT</span>
	<select name="fruit">
		<option value="apple">์‚ฌ๊ณผ</option>
		<option value="banana">๋ฐ”๋‚˜๋‚˜</option>
		<option value="pineapple" selected="selected">ํŒŒ์ธ์• ํ”Œ</option>
	</select>

	<select name="fruit2" multiple="multiple" size="3">
		<option value="apple">์‚ฌ๊ณผ</option>
		<option value="banana">๋ฐ”๋‚˜๋‚˜</option>
		<option value="pineapple" selected="selected">ํŒŒ์ธ์• ํ”Œ</option>
		<option value="melon">๋ฉ”๋ก </option>
	</select>
	<br/><br/>
	
	<span>TEXT AREA</span><br/>
	<textarea rows="10" cols="50" name="msg"></textarea>
</body>
</html>

 

 

 

 

 

 

form ํƒœ๊ทธ

 

https://www.w3schools.com/tags/tag_form.asp

 

HTML form tag

HTML Tag Example An HTML form with two input fields and one submit button:

   

 

www.w3schools.com

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<form action="https://www.naver.com/" method="get">
		<span>์•„์ด๋””</span>
		<input type="text" name="id"/>
		<br/><br/>
		
		<span>๋น„๋ฐ€๋ฒˆํ˜ธ</span>
		<input type="password" name="pwd"/>
		<br/><br/>
		
		<span>์ด๋ฆ„</span>
		<input type="text" name="irum"/>
		<br/><br/>
		
		<!-- submit & reset ๋ฒ„ํŠผ์€ ์ด๋ฒคํŠธ๋ฅผ ํฌํ•จํ•œ๋‹ค -->
		<input type="submit" value="์ „์†ก"/>
		<input type="reset" value="์ทจ์†Œ"/>
	</form>
</body>
</html>

 

GET ๋ฐฉ์‹

 

์ฃผ์†Œ? (ํŒŒ๋ผ๋ฏธํ„ฐ1์ด๋ฆ„=ํŒŒ๋ผ๋ฏธํ„ฐ1๊ฐ’&ํŒŒ๋ผ๋ฏธํ„ฐ2์ด๋ฆ„=ํŒŒ๋ผ๋ฏธํ„ฐ2๊ฐ’&...)

 

- ํ‚ค์™€ ๋ฐธ๋ฅ˜๋กœ ์ด๋ฃจ์–ด์ ธ์žˆ๋‹ค. (๋˜๋Š” ์‹๋ณ„์ž์™€ ๊ฐ’, ํŒŒ๋ผ๋ฏธํ„ฐ๋„ค์ž„๊ณผ ํŒŒ๋ผ๋ฏธํ„ฐ๋ฐธ๋ฅ˜)

- ์›น ๋ธŒ๋ผ์šฐ์ €์˜ ์ฃผ์†Œ์œผ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ์ „๋‹ฌ

- ์ง๊ด€์ ์œผ๋กœ ๋ณผ ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ๋ณด์•ˆ์ด ํ•„์š”ํ•˜์ง€ ์•Š์€ ๊ณณ์—์„œ ์‚ฌ์šฉํ•ด์•ผํ•œ๋‹ค.

- 255์ž ์ด๋‚ด ๋ฐ์ดํ„ฐ๋งŒ ๊ฐ€๋Šฅ

 

POST ๋ฐฉ์‹

 

- ์›น ๋ธŒ๋ผ์šฐ์ € ํ—ค๋” ๋ถ€๋ถ„์— ๋ฐ์ดํ„ฐ๋ฅผ ์ „๋‹ฌ

- ๋ณด์•ˆ์ด ํ•„์š”ํ•œ ๋ฐ์ดํ„ฐ

 

 

 

 

 

 

 

a ํƒœ๊ทธ

 

https://www.w3schools.com/tags/tag_a.asp

 

HTML a tag

HTML Tag Example Create a link to W3Schools.com: Visit W3Schools.com! Try it Yourself » More "Try it Yourself" examples below. Definition and Usage The tag defines a hyperlink, which is used to link from one page to

www.w3schools.com

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<!-- GET๋ฐฉ์‹์€ ์›น ๋ธŒ๋ผ์šฐ์ € ์ฃผ์†Œ์ฐฝ์œผ๋กœ ๋ฐ์ดํ„ฐ ์ „๋‹ฌ/ 255์ž ์ด๋‚ด ๋ฐ์ดํ„ฐ๋งŒ ๊ฐ€๋Šฅ -->
	<!-- POST๋ฐฉ์‹์€ ์›น ๋ธŒ๋ผ์šฐ์ € ํ—ค๋” ๋ถ€๋ถ„์— ๋ฐ์ดํ„ฐ ์ „๋‹ฌ/ ๋ณด์•ˆ์ด ํ•„์š”ํ•œ ๋ฐ์ดํ„ฐ -->
	<form action="https://www.naver.com/" method="get">
		<span>์•„์ด๋””</span>
		<input type="text" name="id"/>
		<br/><br/>
		
		<span>๋น„๋ฐ€๋ฒˆํ˜ธ</span>
		<input type="password" name="pwd"/>
		<br/><br/>
		
		<span>์ด๋ฆ„</span>
		<input type="text" name="irum"/>
		<br/><br/>
		
		<span>์„ฑ๋ณ„</span>
		<input type="radio" name="gender" value="๋‚จ์ž" />
		<span>๋‚จ์ž</span>
		<input type="radio" name="gender" value="์—ฌ์ž"/>
		<span>์—ฌ์ž</span>
		<br/><br/>
		
		<span>๊ณผ์ผ</span>
		<input type="checkbox" name="fruit" value="์‚ฌ๊ณผ"/>
		<span>์‚ฌ๊ณผ</span>
		<input type="checkbox" name="fruit" value="๋”ธ๊ธฐ"/>
		<span>๋”ธ๊ธฐ</span>
		<input type="checkbox" name="fruit" value="๋ฐฐ"/>
		<span>๋ฐฐ</span>
		<input type="checkbox" name="fruit" value="๋ฉ”๋ก "/>
		<span>๋ฉ”๋ก </span>
		<br/><br/>
		
		<!-- submit & reset ๋ฒ„ํŠผ์€ ์ด๋ฒคํŠธ๋ฅผ ํฌํ•จํ•œ๋‹ค -->
		<input type="submit" value="์ „์†ก"/>
		<input type="reset" value="์ทจ์†Œ"/>
	</form>
	<br/><br/>
	
	<h3>ํŽ˜์ด์ง€ ์ด๋™</h3>
	<ol>
		<li>
			<a href="https://www.naver.com/">๋„ค์ด๋ฒ„ ์ด๋™</a>
		</li>
		<li>
			<a href="https://www.google.com/?su=9">๊ตฌ๊ธ€ ์ด๋™</a>
		</li>
	</ol>
</body>
</html>

 

 

 

 

table ํƒœ๊ทธ

 

https://www.w3schools.com/tags/tag_table.asp

 

HTML table tag

HTML Tag Example A simple HTML table, containing two columns and two rows:

                       
Month Savings
January $100
Try it Yourself » More "Try it Yoursel

 

www.w3schools.com

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<table>
		<tr>
			<th>1ํ–‰ 1์—ด</th>
			<th>1ํ–‰ 2์—ด</th>
		</tr>
		<tr>
			<td>2ํ–‰ 1์—ด</td>
			<td>2ํ–‰ 2์—ด</td>
		</tr>
		<tr>
			<td>3ํ–‰ 1์—ด</td>
			<td>3ํ–‰ 2์—ด</td>
		</tr>
	</table>
	
	<table border="1">
		<tr>
			<td>1ํ–‰ 1์—ด</td>
			<td>1ํ–‰ 2์—ด</td>
			<td>1ํ–‰ 3์—ด</td>
		</tr>
		<tr>
			<td>2ํ–‰ 1์—ด</td>
			<td colspan="2">2ํ–‰ 2์—ด 2ํ–‰ 3์—ด ๋ณ‘ํ•ฉ</td>
		</tr>
		<tr>
			<td>3ํ–‰ 1์—ด</td>
			<td rowspan="2">3ํ–‰ 2์—ด 4ํ–‰ 2์—ด ๋ณ‘ํ•ฉ</td>
			<td>3ํ–‰ 3์—ด</td>
		</tr>
		<tr>
			<td>4ํ–‰ 1์—ด</td>
			<td>4ํ–‰ 3์—ด</td>
		</tr>
	</table>
</body>
</html>

 

๋ฐ˜์‘ํ˜•

'KITRI > HTML' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

HTML ์˜ ์ดํ•ด - input ํƒœ๊ทธ  (0) 2020.05.27
HTML ์˜ ์ดํ•ด - ๋ฉ€ํ‹ฐ๋ฏธ๋””์–ด ํ™œ์šฉ(img/audio/video)  (0) 2020.05.27
HTML ์˜ ์ดํ•ด - HTML ์˜ ๊ตฌ์กฐ์™€ ๊ธฐ๋ณธํƒœ๊ทธ(h/font/ul/ol)  (0) 2020.05.27
HTML ์˜ ์ดํ•ด - Tomcat ๋‹ค์šด๋กœ๋“œ ๋ฐ ์„ค์น˜/ ๊ธฐ๋ณธ ์„ธํŒ…  (0) 2020.05.27
'KITRI/HTML' Related Articles more
Comments