Html Form Element

<textarea>

여러줄의 텍스트를 입력하는 영역이다.

 

사용 가능한 속성

• autofocus
  페이지가 로드될 때 자동으로 포커스가 <textarea> 요소로 이동됨을 명시
  boolean 속성을 가지며, 명시하는 순간 true 값을 가짐
  

  <form action="/examples/media/action_target.php" method="get">
      <textarea name="opinion" cols="30" rows="5" autofocus></textarea><br>
      <input type="submit">
  </form>

• cols
  텍스트 입역 영역 중 보이는 영역의 너비를 명시
• dirname
  폼 데이터가 서버로 제출될 때 서버로 보낼 텍스트 방향성을 저장할 이름을 명시
  항상 name 속성값 뒤에 .dir을 붙인 값이다.
• disabled
  비활성화 명시
• form
  해당 <textarea> 요소가 포함 될 하나 이상의 <form> 요소를 명시함
• maxlength
  허용되는 최대 문자 수를 명시
• name
  <textarea>의 이름을 명시
• placeholder
  짧은 힌트를 명시(회색)
• readonly
  읽기 전용임을 명시
• required
  폼 데이터가 서버로 제출되기 전 텍스트 입력 영역이 반드시 채워져 있어야 함
• rows
  보이는 영역의 라인 수 명시
• wrap
  폼 데이터가 서버로 제출될 때 입력된 텍스트의 줄바꿈 방식을 명시
  • soft - 기본값, 제출된 텍스트를 줄 바꿈하지 않음
  • hard - 제출된 텍스트를 줄바꿈함, 반드시 cols 속성이 명시되어야 함

서버에서 받은 데이터를 textarea 초기값으로 넣어주기

<textarea id="myTextarea"></textarea>

<script>
// 서버에서 받은 데이터가 있다고 가정
const serverData = "서버에서 받아온 초기 텍스트입니다.";

// 페이지 로드 시 또는 서버에서 데이터를 받은 후 값을 설정
document.getElementById('myTextarea').value = serverData;
</script>

 

<select>

아래로 펼쳐지며 선택할 수 있는 항목을 제공한다.

• option 태그
  각각의 선택지를 나타냄, 사용자는 이 옵션중 하나 선택할 수 있음
  
  • value
    각 <option>에는 서버에 제출할 값인 value가 있어야 함
  • select
    페이지가 처음 로드될 때 기본 선택을 해준다.
  • disable
    비활성화
  예시
  

  <label for="user-color">색상 선택</label>
  <select id="user-color">
      <option value="red">빨강</option>
      <option value="blue" selected>파랑</option>
      <option value="yellow">노랑</option>
      <option value="green">초록</option>
  </select>​

  
  
  
• <>HTML 삽입
  미리보기할 수 없는 소스
• optgroup 태그
  공통 레이블이 있는 option 태그의 그룹을 나타냅
  사용자에게 더욱 체계적인 옵션 목록 제공
  
  • label
    label 속성으로 옵션 그룹의 레이블을 지정한다.
  예시
  

  <form>
      <label for="fruits" style="display: block;">과일을 선택하세요.</label>
      <select id="fruits">
          <optgroup label="감귤류">
              <option value="orange">오렌지</option>
              <option value="lemon">레몬</option>
              <option value="lime">라임</option>
          </optgroup>
          <optgroup label="베리류">
              <option value="strawberry">딸기</option>
              <option value="blueberry">블루베리</option>
              <option value="raspberry">라즈베리</option>
          </optgroup>
          <optgroup label="열대과일">
              <option value="mango">망고</option>
              <option value="pineapple">파인애플</option>
              <option value="banana">바나나</option>
          </optgroup>
      </select>
      <button type="submit">제출</button>
  </form>

  
  select 태그 반복문, 조건문 (<c:forEach>, <c:if>)
  

  <label for="assNumber">음료</label>
   <select>
     <option value="">선택해주세요.</option>
     <c:forEach var="list" items="${result}">
   	  <option value="${list.beverage}" <c:if test ="${user.selectedBeberage eq list.beverage}">selected="selected"</c:if>>${list.beverage}</option>
     </c:forEach>
   </select>

  ${result}에는 밀크티, 라떼, 아아가 들어있다. ${user.selectedBeberage}에는 사용자가 선택한 음료가 들어있다.
  만일 라떼를 사용자가 선택했다면, 라떼가 기본 선택이 될 것이다. selected를 생각해보자.

 

<button>

• type
  속성의 값에 따른 컨트롤 유형 지정
  
  • submit
    양식 제출 버튼으로, 이 버튼을 클릭하면 해당 요소가 포함되어 있는 양식의 모든 컨트롤 값을 제출
    

    <form action="submit_url">
        <label for="user-name">이름</label>
        <input type="text" id="user-name" name="user-name">
        <button type="submit">제출하기</button>
    </form>

  • reset
    양식 초기화 버튼으로, 이 버튼 클릭하면 해당 요소가 포함되어 있는 양식의 모든 컨트롤 값을 초기화
    

    <form action="submit_url">
        <label for="user-name">이름</label>
        <input type="text" id="user-name" name="user-name">
        <button type="reset">초기화하기</button>
    </form>

  • button
    버튼에는 기본 동작이 없음, 그냥 클릭하면 아무 일도 일어나지 않지만, 
    자바스크립트와 함께 다양한 동작을 컨드롤 할 수 있음
    

    <button type="button" onclick="msg();">버튼 클릭</button>
    
    <!-- 주로 자바스크립트와 함께 사용합니다. -->
    <script>
        const msg = () => {
            alert("환영합니다.");
        }
    </script>

• disabled
• autofocus
  페이지가 로드될 때 해당 컨트롤에 입력 포커스가 있어야 함을 지정
• formnovalidate
  <button type="submit">으로 양식이 제출될 때 양식 영역이 검증되지 않아야 함을 나타냄
  없으면 양식 영역을 검증함
  • HTML5의 기본 기능으로 제공하는 유효성 검사
    input type = "email" 또는 "url" 등 태그내에서 사용하면 자동으로 확인해 줌
  • required 속성이 있는 컨트롤의 값이 지정되어 있는지 검사
    사용자가 컨트롤의 입력값을 지정

반복문으로 버튼 넣기

<c:forEach var="item" items="${result}">
    <button type="button" value="${item.value}">${item.label}</button>
</c:forEach>

 

<input>

<input> 요소가 나타낼 타입을 명시한다.

기본값은 text이며, 왠만하면 명시하는 것이 좋다.

• button - 클릭할 수 있는 버튼을 정의
• checkbox - 체크박스를 정의
• color - 색을 선택할 수 있는 필드 정의
• date - 날짜를 선택할 수 있는 입력 필드 정의
• datetime-local - 날짜와 시간을 선택할 수 있는 입력 필드 정의
• email - 이메일 주소를 입력할 수 있는 필드 정의
• file - 업로드할 파일을 선택할 수 있는 입력필드와 파일 선택 버튼을 정의
• hidden - 사용자에게는 숨김
• image - 제출버튼으로 사용될 이미지를 정의
• month - 날짜를 선택할 수 있는 입력 필드 정의
• number - 숫자를 입력할 수 있는 입력 필드를 정의
• password - 비밀번호를 입력할 수 있는 입력필드 정의
• radio - 라디오 버튼 정의
• range - 슬라이드바를 조정하여 범위 내의 숫자를 선택할 수 있는 필드를 정의
• reset - 리셋 버튼 정의
• search - 검색어 입력하는 필드 정의
• submit - 제출 버튼 정의
• tel - 전화번호를 입력할 수 있는 필드 정의
• text - 한 줄로 된 텍스트 필드 정의
• time - 시간을  선택할 수 있는 입력 필드 정의
• url - url 주소를 입력할 수 있는 입력 필드 정의
• week - 날짜를 선택할 수 있는 입력 필드 정의

예시

<form action="/examples/media/action_target.php" method="get">
    이름 : <input type="text" name="st_name"><br>
    이메일 : <input type="email" name="st_email"><br>
    학년 : <input type="range" name="grade" min="1" max="4"><br>
    <input type="submit">
</form>