웹 프로그래밍 - form의 응용

웹 프로그래밍 - form의 응용

2020. 9. 17. 00:32ㆍ전공 과목/웹 프로그래밍

웹 프로그래밍 - form의 응용

오늘은 form요소 중에서 fieldset, legend를 이용해서 더 구조적인 폼을 만들어 볼 것이다.

fieldset은 큰 틀, legend는 틀의 제목이라고 보면 된다.

아래 화면을 한번 만들어보도록 하자.

소스 코드

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<h2>폼 연결하기</h2>
<form name = "form1" method ="get" action = "">
<fieldset>
<legend>로그인 정보</legend>
아이디:<input type = "text" name = "id"><br>
비밀번호:<input type = "password" name = "pwd" maxlength = "5"><br>
이메일:<input type = "text" name = "email" ><br>
	</fieldset>
	<fieldset>
    <legend>개인정보</legend>
    이름:<input type = "text" name= "irum"><br>
    생년월일:<input type = "text" name ="birth"><br>
	</fieldset>
	<fieldset>
    <legend>신상정보</legend>
    성별 <input type ="radio" name = "woman">여성 <input type = "radio" name = "man">남성<br>
    취미<input type = "checkbox" name = "read">독서<input type = "checkbox" name = "swim">수영<input type = "checkbox" name = "movie">영화감상<input type = "checkbox" name ="travle">여행
	</fieldset>
	<fieldset>
    <legend>소속</legend>
    <select name = "subject" size =5>
    	<option>게임학과</option>
    	<option>컴퓨터공학과</option>
    	<option>정보통신학과</option>
    	<option>융합소프트웨어학과</option>
    	<option>국문과</option>
</select>
	</fieldset>
     
     <fieldset>
     	<legend>장점</legend>
     	취미 <input type = "text" name = "hobby">
     </fieldset>
<input type = "submit" value = "가입하기"><input type = "reset" value = "취소">

</form>

</body>


</html>

저작자표시

'전공 과목 > 웹 프로그래밍' 카테고리의 다른 글

웹 프로그래밍 - DOM-2 (0)	2020.09.17
웹 프로그래밍 - dom (0)	2020.09.17
웹 프로그래밍 - form (0)	2020.09.17
웹 프로그래밍- 팩토리얼, 과자 구매하기 (0)	2020.09.05
웹 프로그래밍 -함수, 구구단 출력하기 (2)	2020.09.05

CS 기록장 💻

CS 기록장 💻

태그

최근글

댓글

공지사항

아카이브

웹 프로그래밍 - form의 응용

'전공 과목 > 웹 프로그래밍' 카테고리의 다른 글

관련글

티스토리툴바