input 태그의 다양한 속성
autofocus :처음에 사이트에 들어왔을때 바로 마우스커서가 표시되는 폼을 지정합니다.
placeholder :예를 들어 ex)zzz@xxxxx.com같은 예를 표시할 때 사용합니다.
readonly :사용자가 보기만하고 수정하지 못하게 내용을 만들때 사용합니다.
required :꼭 입력해야하는 필수 사항을 지정합니다.
min :수량 같은경우 최소 숫자를 지정합니다.
max :수량 같은경우 최대 숫자를 지정합니다.
step :수량을 높이거나 줄일때 커지거나 작아지는 값을 정합니다.(몇개단위 같은경우)
size : 표시할 수 있는 글자의 수를 지정합니다.
maxlength :최대입력 가능한 글자 수를 지정합니다.
minlength :최소입력 가능한 글자 수를 지정합니다.
코드예시↓
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>html문서</title> </head> <body> <form> <label for="p">로그인 <input name="p" type="text" autofocus value="id"> <br> <input name="p" type="text" size="10" minlength="5" maxlength="15" required placeholder="password"> <br> <input name="p" type="submit" value="확인"/> <br> </label> <label for="pr">공지</label> <br> <input name="pr" type="text" readonly value="읽기전용 입니다."> <br> <label for="p1">수량</label> <br> <input name="p1" type="number" min="10" max="100" step="10" value="20"> </form> </body> </html> | cs |
결과↓
여러정보 나열
<select> :말그대로 선택으로 드롭다운형태를 만들어줍니다.
속성
size :한번에 보여질 메뉴개수를 정합니다.
multiple :복수로 선택가능하게 해줍니다.
<option> :위의 드롭다운형태의 선택지를 만들어줍니다.
속성value :서버로 넘겨질값을 지정합니다.selected :선택되어있는 기본값을 지정합니다.
<optiongroup> :위의 선택지를 묶은 것입니다.(보통 상의어가 사용됩니다.)
<datalist> :텍스트필드에 사용자가 입력하지않고 옵션을 선택하는 것으로 필드가 채워지게 해줍니다.(select대신 쓰입니다.)
속성(정확히는 input에 쓰인다...)
value :위의 설명과 같습니다.label :사용자에게 보여질 레이블을 input에 설정합니다.
<textarea> :여러줄 텍스트 영역을 만들어 줍니다.
속성name :다른 영역과 구분을 위해 쓰입니다.cols :가로길이를 지정합니다.rows :세로길이를 지정합니다.
소스코드↓
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>html문서</title> </head> <body> <form> <label for="p">연습</label> <br> <!--Ctrl누른후 마우스로 두개 클릭하면 복수선택 가능합니다.--> <select size="2" multiple id="p"> <option>선택1</option> <option value="choice2">선택2</option> <option selected>선택3</option> </select> <br> <input type="text" list="pr"> <br> <datalist id="pr"> <option value="ch1" label="선택1"></option> <option value="ch2" label="선택2"></option> <option value="ch3" label="선택3"></option> </datalist> <br> <textarea cols="80" rows="2"> .............................................................................. ............................................................................ </textarea> </form> </body> </html> | cs |
사진↓
여기까지 포스팅을 마치도록 하겠습니다.