[웹1]
14강 - input 기본
입력 양식 태그
form (블럭엘리먼트) 데이터전달 영역
1) input 태그 속성
input : type속성에 따라 달라짐
text 한줄 입력 양식(ex. 아이디, 제목 등)
password 비밀번호 입력 양식 ( ... 점으로 입력됨)
hidden 숨김 입력 양식
file 파일 첨부 양식
radio 라디오버튼 (선택버튼 여러개 중 하나만 선택 가능)
속성값인 name을 동일하게 하여 그룹으로 지정 필수
checkbox 체크박스 (선택버튼 여러개 중 다중 선택 가증)
속성값인 name을 동일하게 하여 그룹으로 지정 필수
submit 전송버튼
reset 취소버튼
button 일반버튼
image 이미지버튼
2) input 이외의 태그 (textarea 속성)
textarea : 여러줄의 글자를 입력
cols 너비 지정
rows 높이 지정
select 더보기로 펼쳐지는 것 중 하나 선택
option 메뉴(옵션) 생성
3) input 기타 속성
name 구분하기 위한 이름 지정
size 시각적으로 보여줄 글자수, 칸 너비 지정 (아이디, 비밀번호, 제목 등에 사용)
value 현재 노출값 (버튼의 노출 글자, 실제 적혀져 있는 기본 글자)
placeholder 입력 힌트 (실제 글자 입력 시, 지워짐)
readonly 읽기 전용 (입력 불가) (value 입력 필수)
required 필수 입력
maxlength 최대 입력 글자수 (~255자)
checked 기본으로 체크 상태 설정 (라디오버튼, 체크박스)
fieldset 테두리 영역 만들기
legend 테두리의 타이틀(제목) 만들기
label (인라인 엘리먼트) input태그와 연결된 텍스트(내용)이 짝을 이룰 수 있도록 해줌
(ex. 아이디 텍스트 부분을 클릭해도 박스부분에 커서가 옮겨짐)
따로 떨어져 묶여 있을 땐, input태그의 id값과 label의 for 속성값을 맞춤
* 예제 1
<head>
<title>폼 문서 만들기</title>
</head>
<body>
<h1>폼문서 만들기</h1>
<h2>아이디 비밀번호 입력</h2>
<form> ---> 블럭엘리먼트 / 데이터영역 전달용
<fieldset> ---> 테두리영역
<legend>로그인 정보 입력</legend> ---> 테두리의 제목
<label>아이디<input type="text" name="inputId" size="20" placeholder="아이디입력" maxlength="10" /></label><br />
---> label : 인라인엘리먼트, 텍스트영역 / input : type="text"한줄입력(아이디, 제목 등) / size 20글자 작성가능 크기 (근데 20글자이상 더 적을 수 있음) / placeholder 미리 적혀져 있는 글자, 지우기 가능 (readonly 읽기전용) / maxlength 최대 10글자 적기가능
<label for="p1">비밀번호</label><input type="password" name="pass" size="20" placeholder="비밀번호입력" maxlength="10" id="p1" /><br /> ---> label for="p1" input id="p1"으로 묶어서 텍스트 비밀번호 클릭시, input에 커서로 이동
<input type="submit" name="putId" value="로그인" /> ---> submit 전송버튼 / value 이용하여 버튼의 이름 로그인으로 변경
</fieldset>
</form>
<h2>게시판 형식</h2>
<form>
제목<input type="text" name="title" size="50" value="관리자게시물" readonly="readonly" /><br />
---> 읽기전용 글 쓰는 법 : value="텍스트 입력" readonly="readonly"를 적어준다. 그래서 readonly는 value가 필수!
<textarea cols="50" rows="10" placeholder="내용을 입력하세요."></textarea><br />
---> textarea : input이외의 태그 / 많은 내용을 입력할 경우 textarea 사용한다. / cols : 너비 / rows : 높이
<input type="file" name="file" /><br /> ---> 파일전송 버튼
<input type="submit" name="junsong" value="전 송" /> ---> 전송 버튼 / value : 전송 이름변환
<input type="reset" name="reset" value="취 소" /> ---> 취소 버튼 / value : 취소 이름변환
</form>
<h2>라디오버튼, 체크박스</h2>
<form>
<h3>거주지역 선택</h3>
<label>서울<input type="radio" name="radio" checked="checked" /></label><br />
---> checked : 미리 서울로 체크되어 있음.
<label>대전<input type="radio" name="radio" /></label><br />
---> radio : 여러개 중 하나 선택, 이름으로 그룹묶어주기 필수!
<label>대구<input type="radio" name="radio" /></label><br />
radio에 label태그를 한 이유는?
label을 하는 이유는 텍스트를 지금부터 쓰겠다는 표시용, 알림용이며 / label for , input id 로 그룹묶어주기용 2가지이다
<label>부산<input type="radio" name="radio" /></label><br />
<label>인천<input type="radio" name="radio" /></label><br />
<label>광주<input type="radio" name="radio" /></label><br />
<h3>취미 선택</h3>
<label>독서<input type="checkbox" name="check" /></label><br />
---> checkbox : 여러개 중 다중 선택가능, name으로 그룹묶기 필수!
<label>축구<input type="checkbox" name="check" /></label><br />
<label>사냥<input type="checkbox" name="check" /></label><br />
<label>먹기<input type="checkbox" name="check" /></label><br />
<label>놀기<input type="checkbox" name="check" /></label><br />
<label>자기<input type="checkbox" name="check" /></label><br />
</form>
<h2>셀렉트 메뉴</h2>
<form>
<h3>이메일 입력</h3>
이메일 입력<input type="text" name="email" size="20" />@
<select> ---> 더보기로 이메일 선택 가능 / select로 포문을 열고, option으로 선택사항 적기.
<option>naver.com</option>
<option>daum.net</option>
<option>gmail.com</option>
<option>nate.com</option>
<option>직접입력</option>
</select>
</form>
</body>
</html>
댓글