Formtag 폼 태그 필수속성, Input type 정리(2)

2020/11/08 - [html & css3] - Formtag 폼 태그 필수속성, Input type 정리(1)

Formtag 폼 태그 필수속성, Input type 정리(1)

 

9. type="number" 수량을 선택조절하는 속성입니다.  min 으로 최솟값을, max으로 최대로 선택가능한 수를 지정합니다. 

value : 처음에 필드에 표시될 내용으로 밑의 예제처럼 1로 설정한 경우 디폴트로 1이 표시되어있습니다. value에 아무런 값을 입력하지 않으면 공백으로 나타납니다.

<label>수량을 선택하세요<input type="number" name="number_select" min="1" max="10" value="1"> </label>

수량을 선택하세요

 

 

10. type="range" 슬라이드바 숫자 지정 속성입니다. range속성에 자주 사용되는 요소는 min/max/step/value 등이 있습니다.

min : 최소값 (기본값은 0)

max : 최대값 (기본값은 100)

step : <input> 요소에 입력할 수 있는 숫자들 사이의 간격을 설정합니다.

<label>값을 조절하세요<input type="range" name="range_select" min="1" max="10" value="2"> </label>

 

값을 조절하세요

 

 

11. type="radio" 는 복수선택이 불가능하고 한개만 선택 가능합니다. 디폴트 모양은 원형

 <fieldset style="width: 500px">
  <legend>성별선택</legend>
  <label>성별을 선택하세요</label>
  <label>남<input type="radio" name="gender" checked></label>
  <label>여<input type="radio" name="gender"></label>
</fieldset>

성별선택

성별을 선택하세요 남 여

 

 

12. type= "checkbox" 는 라디오 태그와 달리, 복수 선택이 가능합니다. 디폴트 모양은 사각형

checked : 처음에 디폴트로 체크되어있을 항목을 지정합니다.

<label>관심사항을 선택하세요. 여러개 선택 가능</label><br>
  <label>요리<input type="checkbox" name="interest" checked></label>
  <label>여행<input type="checkbox" name="interest"></label>
  <label>독서<input type="checkbox" name="interest"></label>
  <label>운동<input type="checkbox" name="interest"></label>
  <label>게임<input type="checkbox" name="interest"></label>

 

관심사항을 선택하세요. 여러개 선택 가능요리여행독서운동게임

 

 

13. type="reset"는 수정전송버튼으로 input 요소에 입력된 모든 내용을 삭제하고 입력된 요소를 다시 설정할 수 있습니다.

14. type="submit" 는 제출버튼으로 입력된 내용을 서버로 전송합니다.

<label>업로드할 파일을 선택하세요<input type="file" name="file_add"></label>
  <input type="button" name="button" value="클릭하세요">
  <input type="reset" name="reset" value="수정전송">
  <input type="submit" name="submit" value="제출하기">

 

 

 

15. type="image" 는 이미지 소스를 삽입하는 속성입니다. 보통 image를 삽입할 때에는 <img src=" ~~~">로 하지만, 검색버튼 대신 돋보기 이미지를 삽입하는 등 폼 양식에 적용할 때에는 input 태그로도 이미지 삽입이 가능합니다.

<input type="image" name="search_click" src="https://cdn4.iconfinder.com/data/icons/pictype-free-vector-icons/16/search-512.png" width="30px">

 

 

16. type="color" 는 색상표로, html5 부터 지원되는 속성입니다. 

<input type="color" name="color_select">

필드를 선택하면 컬러피커가 나타납니다. value에 색상값을 입력하면 디폴트 색상을 변경할 수 있습니다.

<input type="color" value="#0000ff">
<!--            기본value를 정해놨을 때-->

▼

 

 

 

17. type="textarea" 는 한 줄 이상의 문장을 입력할 때 사용하는 폼태그입니다. cols와 rows를 사용하여 크기 조절이 가능합니다. width와 height로도 조절할 수 있습니다.

<textarea name="memo" cols="70" rows="5" placeholder="내용을 입력하세요"></textarea>

cols : 열의 크기를 문자 단위로 설정하는 속성(가로 넓이)

rows : 행의 크기를 줄 단위로 설정하는 속성(세로 넓이)

 

18. type="hidden" 은 서버로 데이터가 전송되지만 굳이 사용자에게 보여줄 필요가 없는 데이터를 가려주는 속성입니다.

<input type="hidden" name="데이터" value="사용자에게 보이지 않는 데이터">