<form> </form> | 폼을 만드는 태그 |
---|---|
autocompete | 자동 완성 기능, 기본 속성값은 on, 끄고 싶으면 autocomplete=”off” |
<fieldset> </fieldset> | 폼 내용? |
<legend> </legend> | 폼 제목? |
<label> </label> | label 태그가 있어야 input 태그를 활성화 시켜줌. label을 사용하여야 글씨 눌러도 체크가 된다 |
<input type=” “> </input> | 다양한 type속성이 존재함 |
<body>
<fieldset>과일
<legend>상품 정보</legend>
</fieldset>
<fieldset>택배 발송
<legend>배송 정보</legend>
</fieldset>
<label for="id">이름</label>
<input type="text" id="id" size="5" maxlength="6">
<label for="number">갯수</label>
<input type="number" id="number" min="0" max="10">개 (최대 10개)
<input type="submit" value="입력">
<input type="reset" value="다시 쓰기">
<p>
<ul>
<li><label><input type="checkbox" id="yes" checked>네</label></li>
<li><label>네<input type="checkbox" id="yes"></label></li>
<li><label for="no">아니오</label>
<input type="radio" id="no" name="no">
</li>
</ul>
</body>
<input type=” “> 속성 종류
text | 한 줄 짜리 텍스트를 입력할 수 있는 텍스트 박스(필드) |
---|---|
password | 비밀번호를 입력할 수 있는 필드 |
이메일 주소를 입력할 수 있는 필드로 @가 생김 | |
tel | 전화번호를 입력할 수 있는 필드 |
number | 숫자를 조절할 수 있는 스핀 박스 |
checkbox | 여러 항목에서 2개 이상 선택할 수 있는 체크 박스 |
radio | 여러 항목에서 1개만 선택할 수 있는 라디오 버튼 |
date, month, week | 사용자 지역 기준으로 날짜(연, 월, 일)/(연, 월)/(연, 주)를 넣음 |
time | 사용자 지역 기준으로 시간(시, 분, 초, 분할 초)를 넣음 |
submit | 전송 버튼 삽입 |
reset | 리셋 버튼 삽입 |
button | 일반 버튼 삽입 |
file | 파일 삽입 버튼 |
image | 버튼 대신 사용할 이미지 삽입 |
hidden | 사용자에게 보이지는 않지만 서버로 넘겨주는 값이 있는 필드 |
size | 필드에 몇개의 글자가 보일지 지정, 글자수가 6글자인데 size를 3으로 지정시 3글자 까지만 보임 |
---|---|
maxlength | 필드에 입력할 수 있는 최대 문자 수를 지정 |
value | 텍스트 박스가 아닌 버튼 등에 글씨가 필요할 경우 사용, 이 속성을 사용하지않으면 버튼에 글씨가 없음 |
checked | 체크 박스나 라디오 버튼의 항목을 기본적으로 선택한 상태로 시작 |
placeholder | 연할 색상으로 필드에 힌트를 주는 문자를 작성 |
required | 필수입력란 |
<p>
<input type="button" value="MV보기"
onclick="window.open('<https://youtu.be/123>')"><br>
</p>
<label for="memo">문의 사항</label><br>
<textarea id="memo" cols="40" rows="4" placeholder="글자를 입력하세요"></textarea><br>
파일 첨부 해주세요 <input type="file">