반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>form 테스트</title>
</head>
<body>
<!--
<form> 태그
기본형 - <form [속성="속성값"]>여러 폼 요소</form>
속성 종류
method - 사용자가 입력한 내용을 서버 쪽 프로그램으로 어떻게 넘겨줄 것인지 지정
속성값은 get, post
name - 자바스크립트로 폼을 제어할 때 사용할 폼의 이름을 지정
action - <form>태그 안의 내용을 처리해 줄 서버 프로그램을 지정
target - action 속성에서 지정한 파일 또는 경로를 현재 창이 아닌 다른 위치에서 열고자 할 때 지정
<form name="입력 폼 이름" action="웹 프로그램 페이지" method="전달 방식">
<input type="폼 모양과 기능" name="입력 폼 변수" value="전달 값">
method 속성에서 사용하는 방식
GET 방식 (queryString)
- URL 뒤에 파라미터를 붙여서 데이터를 전달하는 방식
<fieldset>, <legend> 태그
기본형 - <fieldset [속성="속성값"]>
<legend>그룹 이름(fieldset의 제목)</legend>
</fieldset>
-->
<form action="formTest.html" method="post">
<fieldset>
<legend>사용자 정보 입력</legend>
<p>이름 : <input type="text" name="name" placeholder="이름"></p>
<p>연락처 : <input type="tel" name="hp" placeholder="연락처"></p>
<p>이메일 : <input type="email" name="email" placeholder="이메일"></p>
<p>비밀번호 : <input type="password" placeholder="비밀번호"></p>
<p>성별 :
<input type="radio" id="male" name="gender" value="male">
<label for="male">남자</label>
<input type="radio" id="female" name="gender" value="female" checked>
<label for="female">여자</label>
</p>
<p><input type="submit" value="전송"></p>
<p><input type="reset" value="다시 입력"></p>
</fieldset>
<fieldset>
<legend>추가 정보 입력</legend>
<p>
<button onclick="alert('버튼 1 입니다.')">버튼 1</button>
<input type="button" onclick="alert('버튼 2 입니다')" value="버튼 2">
</p>
<p>취미 :
<input type="checkbox" id="run" name="hobby" value="run">
<label for="run">달리기</label>
<input type="checkbox" id="walk" name="hobby" value="walk">
<label for="walk">걷기</label>
<input type="checkbox" id="read" name="hobby" value="read">
<label for="read">독서</label>
</p>
<p>
<label for="path">가입경로</label>
<select id="path">
<option value="blog">블로그</option>
<option value="search">검색</option>
<option value="sns">SNS</option>
<option value="etc">기타</option>
</select>
</p>
<p>
비고 :
<textarea rows="5" cols="50" placeholder="비고 작성란 입니다."></textarea>
</p>
<p>파일첨부 : <input type="file"></p>
</fieldset>
</form>
</body>
</html>
반응형
'IT > HTML' 카테고리의 다른 글
| HTML 3일차 - table 태그 (0) | 2023.05.09 |
|---|---|
| HTML 3일차 - input 태그 (0) | 2023.05.09 |
| HTML 2일차 - 하이퍼링크(a) (0) | 2023.05.09 |
| HTML 2일차 - 미디어태그(audio, video) (0) | 2023.05.09 |
| HTML 2일차 - 미디어태그(object, embed) (0) | 2023.05.09 |