💻웹 문서에 폼 삽입하기(22.11.01 수업)

리안🤍·2022년 12월 20일

웹공부기록

목록 보기

4/4

📌 폼 삽입하기

입력 양식(폼)태그 : 사용자가 입력할 수 있게 만드는 태그
- 폼안에 입력한 내용을 가지고 action연결페이지로 이동
- 입력한 데이터를 들고가는 방식 method = get, post
<form action="연결주소"  method="입력 데이터 전달방식">
get방식 : 주소줄에 보이면서 (id=kim 이름=값)
-> http://localhost:8080/webProject/html1/ex1.html?id=kim
: 가장 많이 사용, 기본방식
post방식 : 주소줄에 안 보이면서 데이터 전달
-> http://localhost:8080/webProject/html1/ex1.html
: 특이한 경우 사용, 비밀번호 포함

명령어
- fieldset = 영역지정태그
- label = 글자 영역지정
- maxlength = 글자 수(길이제한)
- input type= url => 주소제어
                  email => 주소제어
                  tel => 모바일에서 숫자키보드
                  submit => 전송을 하는 버튼
                  button => 아무 기능 없는 버튼
                  reset => 취소 초기화
- checked = 처음부터 체크되어 있음
- autofocus = 자동으로 입력커서 표시
- placeholder = 힌트 내용 표시(설명글)
- readonly = 읽기 전용(수정 불가)
- required = 필수조건 제어

[Test1]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>복습하기</title>
</head>
<body>
<h1>입력 양식</h1>
<form action="ex1.html" method="post"  target="_blank">
<fieldset>
<legend>필수입력사항</legend>
<label>아이디 : </label><input type="text" name="id" value="kim"><br>
<label>비밀번호 : </label><input type="password" name="pass" ><br>
</fieldset>

<fieldset>
<legend>선택사항</legend>
<label>성별 : </label>
<input type="radio" name="ra" value="남">남
<input type="radio" name="ra" value="여">여<br>
</fieldset>
 
 <fieldset>
 <label>취미 : </label>
 <input type="checkbox" name="ch" value="여행">여행
 <input type="checkbox" name="ch" value="게임">게임<br>
 
 <label>등급 : </label>
 <select>
 	<option>목록1</option>
 	<option>목록2</option>
 	<option>목록3</option>
 </select><br>
 
 <label>자기소개</label>
 <textarea rows="10" cols="20"></textarea>
 </fieldset>

<input type="submit" value="전송버튼"><br>

</form>
</body>
</html>

🖥️ 결과물

리안🤍

CRUSH ON

이전 포스트

💻웹 문서에 폼 삽입하기(22.11.01 수업)

웹공부기록

📌 폼 삽입하기

[Test1]

💻웹 문서에 이미지/오디오/비디오, 하이퍼링크 넣기(22.11.01 웹수업)

0개의 댓글