코딩독학 HTML form 요소 3 feat. tcpschool

 

 

 

돌아온 코딩 공부

너무 오랜만이다ㅎ

 

출처 : tcpschool.com

 

 

 

 

온라인으로 실습이 바로 가능해서 편함.

 

 

 

 

---

 

 

tcpschool 내용을 필사해서 결과보기 하는식으로 연습..

 

 

 

 

 

1. 선택 입력 select 요소

 

 

하나의 옵션만 입력 받을 수 있음

 

selected 속성으로 미리 선택되는 옵션 지정 가능함

 

	<h1>선택 입력</h1>
	<p>다음 중 여러분이 가장 좋아하는 과일을 골라주세요.</p>
	<form>
		<select name="fruit">
			<option value="apple"> 사과
			<option value="orange" selected> 귤
			<option value="strawberry"> 딸기
			<option value="peach"> 복숭아
		</select>
	</form>

 

 

결과 >>

 

 

 

 

 

2. 문장입력 textarea

 

 

여러 줄의 텍스트 입력받기

rows, cols 속성을 이용해 크기 지정 가능함

 

 

	<h1>문장 입력</h1>
	<p>여러분의 부모님께 하고 싶은 말을 적어보세요.</p>
	<form>
		<textarea name="message" rows="5" cols="30">여기에 적으세요.</textarea>
	</form>

 

결과 >>

 

 

 

 

 

 

 

 

3. 버튼 button

 

 

버튼을 누르면 알림창이 뜸

 

 

<h1>버튼 입력</h1>
	<button type="button" onclick="alert('버튼을 클릭하셨군요!')">버튼을 눌러주세요.</button>

 

 

결과 >>

 

 

 

 

 

4. 전송 버튼 submit

 

데이터를 폼 핸들러로 제출

폼 핸들러 : 입력받은 데이터를 처리하기 위한 서버 측의 웹 페이지

form 요소와 action 속성을 이용

 

 

<h1>전송 버튼</h1>
	<form action="/examples/media/request.php">
		어릴 때 자신의 별명을 적어주세요 : <br>
		<input type="text" name="nickname" value="별명"><br><br>
		<input type="submit" value="전송">
	</form> 
	<p>별명을 적으신 후에 전송 버튼을 눌러보세요!</p>

 

 

결과 >>

 

 

 

 

 

5. 필드셋 fieldset

 

form 요소와 관련된 데이터들을 하나로 묶어줌

elgend 요소는 filedset 요소 안에서만 사용 가능, fieldset 요소의 제목을 나타냄

 

 

	<h1>필드셋</h1>
	<form action="/examples/media/request.php">
		<fieldset>
			<legend>입력 양식</legend>
			이름 : <br>
			<input type="text" name="username"><br>
			이메일 : <br>
			<input type="text" name="email"><br><br>
			<input type="submit" value="전송">
		</fieldset>
	</form>

 

 

결과 >>

 

 

 

 

 

---

 

 

 

출처 : 티씨피스쿨 (tcpschool.com)