[HTML] FORM

hi·2021년 12월 8일

form

<form action="url" method="http 방법" enctype="mime형식" 
target="프레임 이름"></form>
  • <form> 자체로는 큰 의미가 없지만
    양식 관련 태그들은 모두 <form>태그 안에서 사용해야 함

  • method : 사용자가 입력한 내용을 서버로 넘겨주는 방법 선택

    1. get : 주소 표시줄에 입력한 내용이 그대로 드러남. 보안에 취약
    2. post : 입력 내용의 길이에 제한이 없으며 내용이 드러나지 않아 대부분 이 방법 사용

관련 태그들

textarea

- 여러 줄 입력

<textarea name="" rows="행 수" cols="너비" wrap="줄 바꾸기 방법" readonly>


- readonly : 읽을 수만 있고 입력하지는 못 함
- wrap : cols의 크기를 넘어선 입력에 대해 처리하는 방식 지정

off : 줄 바꿈 없음
soft : 화면상에서만 줄 바꿈, 데이터는 줄 바꿈 되지 않음
hard : 화면, 데이터 모두 줄 바꿈

button

<button type="버튼 형식" name="" value=""></button>

- 버튼 형식 : submit, reset, button

펼침 메뉴

<select name="">
	<option>1번입니다</option>
	<option>2번입니다</option>
	<option>3번입니다</option>
</select>

- 그룹 지정

<select name="">
<optgroup label="번호">
	<option label="1">1번입니다</option>
	<option label="2">2번입니다</option>
	<option label="3">3번입니다</option>
</optgroup>
</select>

목록 상자

<select size="항목 수" name="" multiple>
	<option></option>
</select>

- multiple :ctrl, shift키를 이용해 여러 항목 선택 가능

레이블 및 그룹화

1) 
<label></label>


2) 코드가 떨어져 있는 경우 id 사용
<label for="참조id"></label>
<input ~ id="">

3)
<fieldset>
	<legend>개인정보</legend>
    이름: <input type="text" name="uname">
    주소: <input type="text" name="uaddrs">
    전화: <input type="text" name="uphone">
</fieldset>

input 태그와 여러 타입

input

- 한 줄 입력

<input type="text" name="이름" value="기본문자"
size="너비" maxlenght="최대문자 수">

암호 글 상자

- 암호 입력에 사용됨
- 입력되는 모든 문자는 * 로 나타남

<input type="password" name="" value="" size="" maxlenght="">

숨겨진 필드 작성

- 화면에 나타나지 않는 필드 만들 때 사용
- ex) 아이디 중복 확인

<input type="hidden" >

전송, 내용 취소 버튼

<input type="submit"> 전송
<input type="reset">  취소

이미지로 된 전송 버튼

<input type="image" src="url" name="" 
alt="대체할 설명" align="정렬 방법">

라디오 버튼, 체크박스

<input type="radio" name="fruit" value="포도">포도
<input type="radio" name="fruit" value="사과">사과
<input type="radio" name="fruit" value="딸기">딸기

<input type="checkbox" name="color" value="노랑">노랑
<input type="checkbox" name="color" value="연두">연두
<input type="checkbox" name="color" value="하늘">하늘

파일 선택 상자

<input type="file" name="" value="" accept="">

0개의 댓글