[attribute] HTML - size 속성 ★ - (INPUT 입력창크기 / SELECT 기본노출옵션개수) 지정 (= size속성 = 사이즈속성)

1. size 예제 - <input> 경우
2. size 정의
3. size 구문
4. size 예제 - <select> 경우

size 예제 - <input> 경우

 

<form action="/action_page.php">

  <label for="name">이름:</label>

  <input type="text" id="name" name="name" size="5"><br>

  <label for="self">자기소개:</label>

  <input type="text" id="self" name="self" maxlength="50" size="30"><br>

  <input type="submit" value="Submit">

</form>

 

결과보기

size 정의

 

태그 종류에 따라 의미 다름.

• <input> 태그 - 글자 개수로 입력창 기본 가시 너비 지정.
• <select> 태그 - 스크롤 없이 바로 보이는 옵션 개수 지정.

 

---

 

1. size 속성 사용 가능 태그 종류

<input>, <select>

• size 속성 사용 가능한 <input> 태그 타입 종류: text, search, tel, url, email, password

 

2. cf.

• maxlength 속성 - <input>/<textarea> 입력 가능한 최대 글자수 지정.
• minlength 속성 - <input>/<textarea> 입력 가능한 최소 글자수 지정.

 

3. cf.

• size 속성 - <input> 태그 입력창 기본 가시 너비 지정.
• rows/cols 속성 - <textarea> 태그 입력창 '가시너비/가시높이' 지정.

 

4.

모든 브라우저 모두 지원.

 

size 구문

 

• <input size="number">
• <select size="number">...</select>

 

---

[속성값]

 

number

• <input> 태그 경우, 입력창 너비를 글자수로 지정. (기본값: 20)
• <select> 태그 경우, 기본 가시(=눈에 보이는) 옵션 개수 지정. (기본값: 1) (※ mutiple 속성 존재 시 기본값: 4) 

 

size 예제 - <select> 경우

 

<form action="/action_page.php">

  <label for="langs">언어선택:</label>

  <select id="langs" name="langs" size="3">

    <option value="html">HTML</option>

    <option value="css">CSS</option>

    <option value="js">JS</option>

    <option value="php">PHP</option>

    <option value="sql">SQL</option>

  </select><br>

  <input type="submit" value="확인">

</form>

결과보기

관련글: 배르만 님 (240718) https://sir.kr/qa/539420