Beny's Study
07. form tag (폼 관련 태그) 본문
<form> 태그의 method 속성은 폼 데이터(form data)가 서버로 제출될 때 사용되는 HTTP 메소드를 명시합니다.
method 속성은 속성값으로는 GET과 POST 두 가지 중 하나를 선택할 수 있습니다.
GET 방식은 URL에 폼 데이터를 추가하여 서버로 전달하는 방식입니다.
GET 방식의 HTTP 요청은 브라우저에 의해 캐시되어(cached) 저장됩니다.
또한, GET 방식은 보통 쿼리 문자열(query string)에 포함되어 전송되므로, 길이의 제한이 있습니다.
따라서 보안상 취약점이 존재하므로, 중요한 데이터는 POST 방식을 사용하여 요청하는 것이 좋습니다.
POST 방식은 폼 데이터를 별도로 첨부하여 서버로 전달하는 방식입니다.
POST 방식의 HTTP 요청은 브라우저에 의해 캐시되지 않으므로, 브라우저 히스토리에도 남지 않습니다.
또한, POST 방식의 HTTP 요청에 의한 데이터는 쿼리 문자열과는 별도로 전송됩니다.
따라서 데이터의 길이에 대한 제한도 없으며, GET 방식보다 보안성이 높습니다.
form tag (폼 관련 태그)
-사용자로부터 Text 및 각종 입력을 전달받아 page가 지정한 서버로 전송하는 기능
-주요한 form : text, pw,textarea , button,summit,radio,optdroup등 존재
action, method
- action : 전달된 서버의 url
- method : 전달방식 선택할 수 있음, get=url을 통한 노출, post url과 별도로 데이터 전달
- submit : form에 입력된 데이터를 서버로 전송하는 기능으로 버튼으로 활용
<form action="05_media.html" method="get">
<div>
<label for="userID">아이디</label>
<input type="text" name=" userID" id="userID">
</div>
<div>
<label for="password">비밀번호</label>
<input type="password" name=" password" id="password">
</div>
<div>
<label for="userName">이름</label>
<input type="text" name=" userName" id="userName">
</div>
<div>
<label for="userAge">나이</label>
<input type="number" name=" userAge" id="userAge">
</div>
<div>
<input type="submit" value="제출">
</div>
</form>
제출 -> 새창열림
새창 주소창 :
file:///C:/dev_source/work_space_html/05_media.html?+userID=test&+password=1234&+userName=%ED%99%8D%EA%B8%B8%EB%8F%99&+userAge=20
Fieldset / legend
Fieldset, Legend 태그(잘 사용되지 않는다...)
-fieldset : 폼요소를 그룹으로 묶어주는 태그
-legend : 폼요소를 그룹의 명칭을 붙여주는 태그
<form name="form1" id="form1" action="05_media.html" method="get">
<fieldset>
<legend>로그인</legend>
<input type="text" name="id" id="id"><br>
<input type="password" name="pw" id="pw"><br>
<input type="submit" value="제출">
</fieldset>
</form>
form 관련 복합 예제
<form action="05_media.html" method="get">
<fieldset>
<legend>회원정보</legend>
<div>
<label for="userID">아이디</label>
<input type="text" name="userID" id="userID2" required readonly>
</div>
<div>
<label for="password">패스워드</label>
<input type="password" name="password" id="userID2" required minlength="4" maxlength="10">
</div>
<div>
<label for="userName">이름</label>
<input type="text" name="userName" id="userName2" required>
</div>
</fieldset>
<fieldset>
<legend>기타정보</legend>
<div>
<label for="email">e-mail</label>
<input type="email" name="email" id="email" placeholder="test@email.com">
</div>
<div>
<label for="homepage">홈페이지</label>
<input type="url" name="homepage" id="homepage" placeholder="http://www.myhome.com">
</div>
<div>
<label for="phone">전화번호</label>
<input type="tel" name="phone" id="phone" placeholder="-를 제거해주세요">
</div>
</fieldset>
<fieldset>
<legend>자기소개</legend>
<textarea name="selfInfo" id="selfInfo" cols="80" rows="10" style="resize: none ;">
</textarea>
</fieldset>
<input type="reset" value="리셋"><br>
<button type="submit">제출</button>
</form>
button tag (버튼 태그)
input tag : css적용이 어려워 잘 사용하지 않음
<input type="submit" value="제출"><br>
<input type="reset" value="초기화"><br>
<input type="button" value="버튼"><br><br>
button tag (버튼 태그)
- 버튼태그는 뒤에 br을 붙여줘야한다
-버튼생성은 버튼태그를 추천
<button type="submit">제출</button><br>
<button type="reset">리셋</button><br>
<button type="button">버튼</button><br>
<button type="button"><img src = "resources/image/flower3.PNG" width="100px"></button>
*사진으로 버튼 이미지 적용한것!
숫자관련 태그 (number tag)
<form action="05_media.html" method="get">
<fieldset>
<legend>숫자태그</legend>
<div>
<input type="number" name="point" id="point" max="100" min="0">
</div>
<div>
<input type="range" name="point2" id="point2" max="100" min="0">
</div>
</fieldset>
<button type="submit">제출</button>
</form>
날짜 / 시간 관련 태그
<form action="05_media.html" method="get">
<fieldset>
<legend>날짜/시간</legend>
<div>
<label for="birthday">생일</label>
<input type="date" name="birthday" id="pobirthdayint" value="2000-10-10">
</div>
<div>
<label for="reserve">시간예약</label>
<input type="time" name="reserve" id="reserve" value="14:20">
</div>
<div>
<label for="reserve2">일자 + 시간예약</label>
<input type="datetime-local" name="reserve2" id="reserve2" value="2022-06-10T18:30">
<!-- 날짜/시간 표준 포맷 iso-8601 yyyy-mm-ddThh:mi -->
</div>
</fieldset>
</form>
선택관력 태그
<form action="05_media.html" method="get">
<fieldset>
<legend>라디오</legend>
<input type="radio" name="gender" id="gender-male" value="m" checked>
<label for="gender-male">남</label>
<input type="radio" name="gender" id="gender-female" value="f">
<label for="gender-female">여</label>
</fieldset>
<button type="submit">제출</button>
<fieldset>
<legend>체크박스</legend>
<input type="checkbox" name="hobby" id="music" checked>
<label for="music">음악감상</label>
<input type="checkbox" name="hobby" id="music" checked>
<label for="music">음악감상</label>
<input type="checkbox" name="hobby" id="music" checked>
<label for="music">음악감상</label>
</fieldset>
</form>
"본 인터넷 사이트 내의 모든 이미지, 문구, 콘텐츠, 내용 등에 대한 저작권은 76beny에게 있습니다.
이를 무단으로 도용, 복사, 전재, 재배포, 2차 변형 등을 할 경우
민, 형사상 법적 조치 등 저작권법에 의거하여 처벌 받을 수 있습니다."
'HTML_VSC' 카테고리의 다른 글
| 09. 프레임 관련 태그 (frame tag) (0) | 2022.06.10 |
|---|---|
| 08. form tag (폼 입력 양식 요소) (0) | 2022.06.10 |
| 06. 멀티미디어 관련 태그 (0) | 2022.06.10 |
| 05. div / span (영역관련 태그) (0) | 2022.06.10 |
| 04. table tag (표 관련 태그, 테이블 관련 태그) (0) | 2022.06.10 |
