<input></input>태그

file type

form 태그 내부에 input type=file이 있는 경우, 해당 input버튼으로 파일을 서버에 전송할 수 있다.

form 태그의 method 속성은 POST로 설정해야 하고 enctype 속성을 multipart/form-data로 설정해야 한다. 이 두 가지 속성을 반드시 설정해야 정상적으로 파일을 보낼 수 있다.

<form action="" method="post" enctype="multipart/form-data">
		<p><input type="text" name="username"></p>
		<p><input type="file" name="upfile" multiple ></p>
		<input type="submit" value="업로드">
</form>

accept

accept="image/*” 처럼 작성해서 받을 파일을 지정할 수 있다. 파일 탐색 창에서 지정한 파일을 우선적으로 보여줄 뿐 받는 파일을 강제시키는 것은 아니다. 강제시키는 건 자바에서 확장자를 구분해서 처리할 수 있다.

multiple

파일을 다중 업로드 가능하게 하는 속성이다.

image type

<form action="">
      <input type="text" name="text">
      <input type="image" src="../CSS/images/rogo.png" width="80" height="30">
</form>

날짜 관련 type

min, max로 입력 받을 날짜에 대한 제한을 설정할 수 있고, type에 따라 보여지는 ui가 다르다.

<form action="">
      <!-- 2022년도만 입력 받는 경우 -->
      <p>date <input type="date" name="date" min="2022-01-01" max="2022-12-31"></p>
      <p>datetime <input type="datetime" name="date"></p>
      <p>datetime-local <input type="datetime-local" name="date"></p>
      <p>month <input type="month" name="date"></p>
      <p>week <input type="week" name="date"></p>
      <p>time <input type="time" name="date"></p>
      <p><input type="submit" value="전송"></p>
</form>

color type

지정한 색상의 RGB값을 value에 저장해서 보낼 수 있다.

<form action="">
    color<input type="color" name="color">
    <input type="submit" value="제출">
</form>

number, search, email, url type

<form action="">
       <!-- 증가, 감소하는 버튼(스피너)이 존재함. 값 설정 가능.
				전송은 어차피 문자로 되지만 숫자값을 받기 편리하다. -->
       number <input type="number" name="number" max="150" min="100" step="20">
       <!-- 검색하려던 내용을 삭제할 수 있는 x키 존재 -->
       search <input type="search" name="search">
       <!-- '@문자'를 무조건 입력 받게 함.
				@다음 문자가 존재하는지까지만 판단하기 때문에 정교하지 않음 -->
       email <input type="email" name="email">
       <!-- url주소 타입에 맞게 입력 받게 함 http://주소... -->
       url <input type="url" name="url">
       <input type="submit" value="제출">
</form>

💡해당 타입에 맞게 입력하지 않으면 제출이 안 되고 에러 메시지를 자동으로 띄워준다.

<select></select>태그

콤보 박스로 데이터를 입력 받는 태그로 주로 검색 항목, 정해진 데이터 한 개를 입력 받을 때 사용한다.

select 태그의 자식 태그인 option 태그로 선택 항목을 지정 selected 속성을 부여하면 select의 기본 선택 값을 줄 수 있다.

<textarea></textarea>태그

멀티 라인으로 문자열 데이터를 받는 태그이다. rows와 cols로 텍스트 박스의 크기를 지정할 수 있다.

rows : 개행이 크기의 기준

cols : 한 글자에 대한 크기 기준

입력한 텍스트 범위가 넘어가면 내부에 스크롤이 자동으로 생성된다. rows, cols는 텍스트 박스의 처음 길이를 설정할 뿐 사용자가 마우스로 크기를 변경할 수 있기 때문에 고정하려면 스타일 적용을 해야 한다.

<form action="">
			<!-- select 태그에 그룹을 지정 -->
       <select name="searchKeyword">
            <option value="title">제목</option>
            <option value="content">내용</option>
            <option value="writer" selected>작성자</option>
            <input type="text" name="keyword">
            <input type="submit" value="검색">
       </select>
       <select name="city">
            <optgroup label="광역시">
                 <option value="서울">서울</option>
                 <option value="대전">대전</option>
                 <option value="부산">부산</option>
                 <option value="인천">인천</option>
            </optgroup>
            <optgroup label="경기도">
                 <option value="광명">광명</option>
                 <option value="안양">안양</option>
                 <option value="시흥">시흥</option>
            </optgroup>
            <optgroup label="전라도">
                 <option value="남원">남원</option>
                 <option value="여수">여수</option>
            </optgroup>
      </select>
      <br>
			<!-- resize : none으로 설정하면 사용자가 박스 크기를 조절할 수 없다. -->
      <textarea name="info" rows="3" cols="30" style="resize: none;">
      </textarea>
</form>

<datelist></datalist>태그

datelist에 작성한 내용은 기본적으로 출력 되지 않고 데이터가 작성됐을 때만 추천하는 내용처럼 출력 된다. 해당 목록을 클릭해서 자동완성된 데이터를 입력할 수 있다.

<input type="text" name="keyword" list="recommand">
<datalist id="recommand">
      <option value="iphone11">iphone11</option>
      <option value="iphone12">iphone12</option>
      <option value="iphone13">iphone13</option>
      <option value="iphone14">iphone14</option>
</datalist>

이전 검색했던 이력이 같이 뜬다…