[- Disclaimer -]
아래 내용은 정보보안 공부 목적으로 작성된 것이나, 이를 토대로 허가되지 않은 대상에 실습을 진행할 경우 해킹 시도로 간주하여 법적 처벌을 받을 수 있음을 알려 드립니다.
<form>
✦ 양식
✧ 양식 제출 시 값들 전달
Ex)
<form name="aapsemiordoenus" method="GET/POST" action="aapsemiordoenus.js">
Ex)
<form name="aapsemiordoenus" method="GET/POST" action="Web Server 프로그램의 경우 URL">
Plain Text
복사
✦ <input>, <textarea>, <select>, <button> 등 요소 사용
✧ <input>: radio type, text type, button type, checkbox type 등 속성들 많음
Text 관련: text, password
선택 관련: radio, checkbox
Button: submit, reset, button, image
기타: file, hidden
autocomplete 속성: 사용자 입력 자동 완성
placeholder 속성: 입력 값 설명 희미하게 미리 표시
required 속성: 사용자 필수 입력 검증
multiple 속성: 여러 개 Mail 주소를 ,로 구분 // email에서
pattern 속성: 정규 표현식으로 지정 // tel에서
placeholder 속성: 입력 자리 수 표시 // tel에서
Plain Text
복사
✦ Ex)
<h3>캐릭터 생성기</h3>
<form method="GET" action=form_app.js">
성명: <input type="text" name="person" /> <br />
성별: <input type="radio" name="sex" value="male" />남성
<input type="radio" name="sex" value="female" >여성<br />
직업: <select name="job" size="1">
<option>백수무직</option><option>세계대통령</option>
<option>대마왕</option><option>대마왕 직속 부하</option>
</select>
<p> 스테이터스 배분(복수 선택 가능)<br />
- 능력치: <input type="checkbox" name="status" value="STR" />빠와
<input type="checkbox" name="status" value="DEF" />디뻰
<input type="checkbox" name="status" value="DEX" />민첩
<input type="checkbox" name="status" value="INT" />매직<br />
캐릭 설명: <br />
<textarea name="comments" rows="4" cols="40" /></textarea>
</p><hr>
<input type="submit" value="등록" />
<input type="reset" value="초기화" />
Plain Text
복사
Text 입력
✦ 한 줄 문자열 입력
<input type=”text” name=”[속성명]” value=”[사용자 입력 값, 초기 값]” />
Plain Text
복사
✦ P/W 입력
✧ 보안이 필요한 문자 입력 칸이며 ·로 표시
<input type="[P/W]" name="[변수명]" />
Plain Text
복사
✦ 여러 줄 문자열 입력
✧ 표시 영역보다 많은 Text 입력 시 Scroll Bar
<textarea name="[속성명]" cols="[Column 수]" rows="[row 수]">
Plain Text
복사
✦ Ex)
<h3> - Example - </h3>
<form method="POST" action="app.js">
ID: <input type="text" name="id" value="여기다 아이디를 입력하세여"><br />
P/W: <input type="password" name="pw">
<p>하고싶은말:</p>
<textarea name="comment" cols="50" rows="5">여기다 적으세여</textarea>
</form>
Plain Text
복사
✦ Data 목록 기능
✧ <datalist>
→ 검색어 자동 완성 혹은 제시어 기능 구현
→ <input> 내 list 속성에 <datalist>의 id 속성 지정 // 입력 창에 Pocus가 들어오면 옵션 목록 등장
참가 국가: <input type="text" size="12" list="country" />
<datalist id="country">
<option value="스페인" />
<option value="스페인" />
<option value="영국" />
<option value="독일" />
</datalist>
Plain Text
복사
✦ 양식 있는 Text
✧ Mail, URL, tel, search
<input type="email" />
Plain Text
복사
<input type="URL"/>
Plain Text
복사
<input type="tel" />
Plain Text
복사
pattern="[A-Za-z}{no}", pattern="[0-9]{no}",
pattern="[0-9]+", pattern="[A-Za-z0-9]{min, max}"
Plain Text
복사
Tel: <input type="tel" placeholder="00*-000*-0000" tattern="[0-9]{2,3}-[0-9]{3,4}-[0-9]{4}" />
Plain Text
복사
Button
✦ 일반 Button
<input type="button" value="누르는 버튼" />
Plain Text
복사
✦ 양식 제출
<input type="submit" value="누르면 전송" />
Plain Text
복사
✦ 초기화
<input type="reset" value="누르면 Form 입력 값 초기화" />
Plain Text
복사
✦ Image Button
<input type="image" src="이미지" alt="대체 문자열" />
Plain Text
복사
✦ <button>
<button type="submit">누르는 버튼</button>
Plain Text
복사
✦ Ex)
<form method="GET" action="app.js">
<input type="submit" value="보내기" />
<input type="reset" value="입력 초기화" />
<input type="button" value="확인하기" onClick="alert("입력 값 확인")" />
<input type="image" src="aapsemiordoenus.gif" alt="전송 Button" />
Plain Text
복사
선택형 관련 Tag
✦ radio
✧ 선택 시 name이 같은 그룹들에서 Value 하나만 전달
→ Ex) member=yes&sex=male
input type="radio" name="aapsemiordoenus" value="[값]" checked />
Plain Text
복사
회원 여부 : <input type="radio" name="member" value="yes" checked />회원
<input type="radio" name="member" value="no" />비회원<br />
성별 : <input type="radio" name="sex" value="male" />남성
<input type="radio" name="sex" value="female" />여성
Plain Text
복사
✦ checkbox
✧ 선택 시 checkbox에 표시된 모든 Value 값들 전달
<input type="checkbox" name="aapsemiordoenus" value="[값]" checked />
Plain Text
복사
취미(중복가능):
<input type="checkbox" name="hobby" value="aapsemiordoenus" />멍때리기
<input type="checkbox" name="hobby" value="running" />달리기
<input type="checkbox" name="hobby" value="pc" />컴신
<input type="checkbox" name="hobby" value="mgenshinimpact" />모바일 원신
Plain Text
복사
✦ 선택 목록에서 선택
✧ Drop Down 형태에서 선택 후 Value 전달
<select name="[목록명]" size="[항목 수]"> // <option> 수 정의
<option value="[값]"> 항목1 </option>
<option value="[값]"> 항목2 </option>
<option value="[값]"> 항목3 </option>
</select>
Plain Text
복사
<select name="[목록명]" size="2" multiple> // 표시 항목 수에 맞춘 Scroll Bar
<option value="[값]"> 항목1 </option>
<option value="[값]"> 항목2 </option>
<option value="[값]"> 항목3 </option>
</select>
Plain Text
복사
✦ 파일 선택
업로드 파일 선택 <br />
<input type="file" name="myfile" />
Plain Text
복사
✦ id 속성에 연결
✧ 연결된 양식에 입력 준비 시키거나 Check 등 하며 Data 전달 영향 없음
<label for="[id]"></lable>
Plain Text
복사
<lable for="hello">헬로</label>
<input type="radio" name="aa" id="hello" value="뭐">
Plain Text
복사
✦ Groupping
✧ <fieldset>
→ 사용자 시각적 편의성을 위해 Form 양식을 묶는 범위 지정
→ 입력 필드의 Group 주위에 기본 Style로 테두리 선
name 속성: Group명
form 속성: 연결할 Form
disabled 속성: Group 내 모든 하위 요소 비활성화
Plain Text
복사
✧ <legend>
→ Group 구분용 Group 제목 Label
→ <fieldset>의 첫 번째 자식 요소로서 1번만 사용
→ Group Label의 Style은 Group 구분선 중간에 걸쳐 표시
<form method="POST" action="app.js">
<fieldset>
<legend>로그인</legend>
<label for="user_id">ID : </label>
<input type="text" name="아디 : " size="20" id="user_id"><br />
<label for="user_pw">비번 : </label>
<input type="password" name="pw" size="20" id="user_pw">
</fieldset><br />
</form>
Plain Text
복사
✦ 날짜 입력
✧ input type에서 date, month, week
✦ 색상 입력
✧ input type에서 color // 사용자가 Color 선택
✦ 숫자 입력
✧ input type에서 number // min, max, step, value 있음
✦ 범위 입력
✧ input type에서 range // min, max, value 있음