HTML - Form

<form>의 기본 속성

• <form></form> 은 정보를 입력하는 영역

  : 로그인 화면에서 아이디와 비밀번호를 입력하는 것, 회원 가입할 때 정보를 입력하는 양식 등은 모두 폼을 이용한다.

  폼에 입력을 하고 제출(submit)하게 되면 데이터는 서버로 전송되고, 전송한 데이터는 웹 서버가 처리하며, 처리 후 로그인 결과 화면 같은 다른 웹 페이지를 클라이언트에 전송한다.
  
  

• <form> 의 동작 방식

  1. 웹 페이지에 있는 <form>에 데이터를 입력한다.

  2. 웹 페이지 내 액션이 일어나게 되면 데이터는 웹 서버로 이동한다.

  3. 웹 서버는 데이터를 처리하기 위해 App을 호출한다. 이때 App은 물리적으로 별도의 서버일 수도 있다.

  4. 필요에 따라 App은 DB로 데이터를 전송한다. 이때 DB는 물리적으로 별도의 서버일 수도 있다.

  5. DB에서 CRUD(Creat, Read, Update, Delete) 작업이 일어나고 작업 결과를 App으로, WEB으로 전송한다.

  6. 웹 서버는 받은 결과를 Client 브라우저에게 보낸다.

  7. 사용자 브라우저는 Response 받은 페이지를 렌더링하여 사용자에게 보여준다.

---

form <action="">, <method=""> 속성

• <form action="">

  : <action> 속성의 값은 전송 시 <form> 에 있는 정보를 수신할 서버 페이지의 URL 이다.
  
  

• <form method="">

  : <method> 속성의 값은 get 과 post 방식이 있다.

  • <form method="get">
    : <form>에 있는 값은 <action> 속성에 지정한 URL의 끝에 추가된다.
    이는 검색 창과 같은 간단한 <form> 이나 단순히 웹 서버로부터 데이터를 조회하는 경우에 사용한다.
    
    
  • <form method="post">
    : 전송 값은 HTTP 헤더에 추가된다. 일반적으로 파일을 올리는 경우, 전송 데이터가 매우 긴 경우, 민감한 데이터가 포함된 경우, 데이터베이스에 정보를 추가하거나 삭제하는 경우에 사용한다.

---

<input>

• <input>

  : <input> 은 사용자가 다양하게 폼 태그에 입력할 수 있는 공간을 만들어 주고, 사용자에게 정보를 입력을 받는다.
  
  

• <input type="">

  : 태그 모양을 다양하게 변경할 수 있다. Type에서는 text, radio, checkbox, password, button 등을 지정할 수 있다.
  
  

• <input name="">

  : 태그 이름을 지정한다.
  사용자가 <form> 에 정보를 입력하면 서버는 입력한 데이터가 어떤 폼 컨트롤에 해당하는지 알아야 한다. <name> 속성의 값은 폼 컨트롤러를 식별하고 입력한 정보와 함께 서버에 전달한다.
  
  

• <input maxlength=""> 또는 <input minlength="">

  : <input maxlength> 는 입력할 수 있는 최대 글자 수를 지정한다.
  <input minlength> 는 입력할 수 있는 최소 글자 수를 지정한다.
  
  

• <input readonly>

  : <form> 을 읽기 전용으로 한다.
  읽기 전용으로 설정된 입력 필드는 사용자가 수정할 수는 없지만, 해당 내용을 하이라이트하거나 복사할 수는 있다.

  따라서 이 속성을 사용하면 특정 조건이 충족될 때까지 사용자가 입력 필드의 내용을 수정할 수 없도록 설정하고, 특정 조건이 충족되면 자바스크립트 등으로 <readonly> 속성값을 삭제하여 사용자가 입력 필드를 수정할 수 있도록 조절할 수 있다.

  readonly 속성은 불리언(boolean) 속성이다.
  불리언 속성은 해당 속성을 명시하지 않으면 속성값이 자동으로 false 값을 가지게 되며, 명시하면 자동으로 true 값을 가지게 된다.

  참고로 <disabled> 속성이 명시된 입력 필드의 값은 서버로 제출되지 않지만, <readonly> 속성이 명시된 입력 필드의 값은 서버로 제출된다.
  
  

• <input required>

  : 필수 태그로 지정되어 입력하지 않고 submit 버튼을 누르면 에러가 떠 데이터가 전송되지 않는다.
  
  

• <input autofocus>

  : 웹 페이지가 로딩 되면 이 속성을 지정한 태그로 포커스가 바뀝니다.
  
  

• <input placeholder="">

  : 입력할 값에 대한 힌트를 준다.
  
  

• <input pattern="">

  : 정규표현식을 사용하여 특정 범위 내의 유효한 값을 입력 받을 때 사용한다.
  

---

<input type="">

• <input type="text">
  

  : 한 줄의 텍스트 입력을 만들 수 있다.
  
  
  

• <input type="password">
  

  : 텍스트 입력이 가능한 텍스트 박스가 생성되지만 문자는 마스크 처리 된다.
  
  

• <input type="radio">
  

  : 라디오 버튼을 통해 여러 옵션 중 하나를 선택할 수 있다.

  <value=""> 속성은 선택된 옵션에 대해 서버로 전송되는 값을 나타낸다.

  <checked> 속성은 페이지 로드 시 선택해야 하는 값을 나타내는 데 사용한다. 폼 그룹 중 하나의 라디오 버튼에만 이 속성을 사용해야 한다.

  <name=""> 속성은 사용자가 선택한 옵션의 값과 함께 서버에 전송된다. 질문에 대한 답변을 라디오 형태로 제공하는 경우, 모든 라디오 버튼의 <name> 속성 값은 동일해야 한다.

  참고로 라디오 버튼은 한 번 선택하면 취소할 수 없으며 다른 옵션을 선택할 수 있을 뿐이다. 따라서 취소 기능 옵션을 제공하려면 <radio type="checkbox"> 를 사용해야 한다.
  
  

• <input type="checkbox">
  

  : 체크박스를 통해 사용자는 질문에 대한 답변에서 하나 이상의 옵션을 선택 또는 해제할 수 있다.

  <value=""> 속성은 선택된 옵션에 대해 서버로 전송되는 값을 나타낸다.

  <checked> 속성은 페이지 로드 시 선택해야 하는 값을 나타내는 데 사용한다. 폼 그룹 중 하나의 체크박스 버튼에만 이 속성을 사용해야 한다.

  <name=""> 속성은 사용자가 선택한 옵션의 값과 함께 서버에 전송된다. 질문에 대한 답변을 체크박스 형태로 제공하는 경우, 모든 체크박스의 <name> 속성 값은 동일해야 한다.
  
  

• <input type="file">
  

  : 사용자가 파일을 올릴 수 있는 속성이다.
  
  

• <input type="image">
  

  : 전송 버튼에 이미지를 사용하고 싶은 경우에 사용하는 속성이다.
  
  

• <input type="submit">
  

  : <form> 을 서버에 보내는 데 사용한다.

  <value=""> 속성은 버튼에 표시되는 텍스트를 제어하는 데 사용된다. 가급적 버튼에 표시할 단어를 지정하는 것이 좋다. 왜냐하면, 기본값은 'submit' 이기 때문에 모든 경우에 적합하지 않을 수 있다.
  
  
  

• <input type="date">
  

  : 사용자에게 날짜를 요청하는 경우 사용한다.
  
  
  

• <input type="time">
  

  : 사용자에게 시간 입력을 요청하는 경우 사용한다.
  
  
  

• <input type="email">
  

  : 사용자에게 이메일 주소를 요청하는 경우 이메일 입력을 사용할 수 있다.
  유효성 검증에서 @ 를 입력할 수 있도록 최적화 한다.

  
  

• <input type="tel">
  

  : 전화번호를 입력하도록 요청할 수 있는 속성이다.
  
  
  

• <input type="url">
  

  : 사용자에게 웹 페이지 주소를 요청할 때 사용다.
  유효성 검증에서 URL 형식으로 입력할 수 있도록 최적화 한다.
  
  
  

• <input type="search">
  

  : 검색어를 입력하는 한 줄의 텍스트 박스를 만들기 위해 사용한다.
  
  

• <input type="range">
  

  : 슬라이드바 형식의 속성이다.
  
  

• <input type="number">
  

  : 숫자를 선택할 수 있는 속성이다.
  
  
  

• <input type="color">
  

  : 색을 선택할 수 있는 속성이다.
  

---

<label>

• <label></label>

  : 단순히 <input> 태그를 설명하는 텍스트를 옆에 붙여 무엇을 입력해야 하는지 설명할 수 있겠지만, 시각 장애인들도 폼을 사용할 수 있도록 시멘틱한 <label> 요소를 사용하도록 한다.

  <label> 요소는 두 가지 방법으로 사용한다.

  1. 텍스트의 설명과 폼 입력 모두를 포함하는 방식
     
  2. 폼 입력에서 분리하여 <label for=""> 속성으로 레이블을 지정하는 방식
     
     
     

• <label for="">
  

  : <label for=""> 속성은 레이블이 속한 폼 컨트롤을 의미한다. 따라서 <label for=""> 속성 값은 레이블을 붙일 폼 컨트롤의 id 속성과 일치해야 한다.

  <label for=""> 요소를 <input id=""> 요소와 함께 사용하면, 사용자는 선택을 하기 위해 폼 컨트롤이나 레이블을 선택할 수 있다. 즉, 클릭할 수 있는 영역이 넓어져 폼을 더 쉽게 사용할 수 있다.

---

<fieldset>, <legend>

• <fieldset></fieldset>

  :<fieldset> 요소를 사용하면 그 자식 요소로 사용 되는 폼 컨트롤들을 그룹화 할 수 있다. 특히 폼 내용이 많은 경우에 유용하게 사용된다.
  
  

• <legend></legend>

  : <legend> 요소는 <fieldest> 태그 바로 뒤에 위치하여 폼 컨트롤 그룹의 목적을 나타내는 제목을 포함한다.
  따라서 반드시 <fieldset> 의 첫번째 자식으로 사용해야합니다.

---

<select>, <option>

• <select></select>

  : 드롭다운 리스트 박스를 통해 사용자는 리스트 중 하나의 옵션을 선택할 수 있다.
  <select> 요소에는 두 개 이상의 <option> 요소를 포함한다.

  <select multiple="multiple"> : <multiple> 속성을 사용하면 사용자가 여러 개의 <option> 요소를 선택할 수 있게 된다.
  단, 단순 클릭으로는 선택 되지 않으며 Windows 에서는 ctrl, Mac 에서는 command 버튼을 누르고 클릭해야 여러 개를 선택할 수 있다.

  <selecte size=""> : <size> 속성을 통해 드롭다운 리스트에서 한 번에 보여줄 수 있는 option의 갯수를 조절할 수 있다.
  
  

• <option></option>

  : <option> 요소는 사용자가 선택할 수 있는 옵션을 지정하는 데 사용된다. 태그 사이의 단어는 드롭다운 박스에서 사용자에게 보여진다.

  <option value=""> : <option value=""> 속성은 컨트롤의 이름과 함께 서버에 전송되는 값을 나타낸다.

  <option selected> : 페이지가 로딩되고 난 뒤 기본으로 선택되는 옵션을 나타내는 데 사용한다. 이 속성을 사용하지 않으면 첫 번째 항목이 해당 컨트롤의 값으로 서버에 전송된다.

---

<button>

• <button></button>

  : <button> 태그는 클릭 가능한 버튼을 나타낸다. 버튼의 모습을 다양하게 제어하고 버튼 내부에 다른 자식 요소를 추가하고 싶을 때 사용한다.
  
  

• <button type="">

  : type은 버튼의 행동 방식을 설정하는 속성이다.

  <button type="submit"> : 버튼이 서버로 양식 데이터를 제출한다.
  지정하지 않은 경우 기본 값이며, 유효하지 않은 값일 때도 사용한다. 때문에 폼 양식을 제출하기 위한 용도가 아니라면 반드시 <type> 을 선언해 준다.

  <button type="reset"> : 폼의 모든 값을 초기화 시킨다.

  <button type="button"> : 사용자가 기능을 부여하기 전까지는 작동을 하지 않는 버튼이다.
  
  

• Input vs button

  <button> 요소는 <input> 요소 보다 스타일을 적용하기 훨씬 수월하다.

  <input>은 닫는 태그가 없기 때문에 <input value=""> 특성에 텍스트 값 밖에 지정할 수 없지만, 
  <button>은 내부에 여러가지 자식 컨텐츠를 추가할 수 있다. 또한, ::after 와 ::before 와 같은 가상 요소를 사용하는 것도 가능하다.

  따라서 더 다채롭고 멋진 스타일을 적용해야 한다면 <button> 요소를 우선적으로 고려해 보는 것이 좋다.

---

<textarea>

• <textarea></textarea>

  : <textarea> 요소는 여러 줄의 텍스트 입력을 만드는 데 사용한다. 다른 입력 요소와 달리 닫기 태그가 있어 내용을 작성할 수 있다.
  사용자가 태그 사이에 있는 텍스트를 지우지 않으면 입력한 텍스트와 함께 서버로 전송된다.

  일부 사이트에서는 자바스크립트를 이용해 사용자가 클릭하는 순간 미리 적어둔 텍스트가 지워지도록 만든다.
  
  

• <textarea cols="">

  : <textarea> 가 보여줄 입력 창의 넓이로 문자의 평균적인 넓이를 기준으로 한다. 양수 값만 사용할 수 있으며 기본 값은 20이다.
  하지만 이제는 CSS를 사용해 너비와 높이를 조절할 수 있다.
  
  

• <textarea rows="">

  : <textarea> 입력 창이 기본적으로 보여줄 입력 줄 수를 의미한다.
  하지만 이제는 CSS를 사용해 너비와 높이를 조절할 수 있다.

---

<datalist>

• <datalist></datalist>

  : <datalist> 는 <select> 와 <input> 을 섞어서 사용할 수 있도록 한다. <input list=""> 속성을 이용해 <datalist id=""> 속성과 연결하여 사용한다.

  사용자에게 기본적으로 선택할 수 있는 옵션을 제공함과 동시에, 만약 옵션에 선택하고 싶은 값이 없는 경우 사용자 가 원하는 임의의 값을 입력 받을 수 있도록 편의성을 제공한다.
  
  

• <input list="">

  : <input> 요소에서 사용하기 위해 미리 정의해 놓은 옵션들을 포함하고 있는 <datalist> 요소를 명시한다.