form, input 태그 + etc

그 동안 주먹구구식으로 해결왔던 from, input 태그를 정리해보기로 했다.

 

 

form

 - action : submit된 정보들을 서버의 어디로 전송할 것인지

 - method : get, post(url로 입력값 노출하고 싶지 않을 때) form에 작성한 내용은 거의 90% post 방식을 사용함

 - enctype : file을 제출하는 form일 경우에 필요함. 대개 멀티파트 업로드를 지정하기 위함. multer를 활용한 업로드시에 반드시 지정해줘야 함. 대개 multipart/form-data enctype="multipart/form-data"값을 줌.

 

input

 - type : text, password, email, textarea, radio, checkbox, reset, hidden, file 등 적합한 속성을 사용

    - textarea는 여러 줄의 텍스트를 입력될 때 사용되며 cols, rows로 크기를 조정할 수 있음

    - radio는 단일 선택, checkbox는 다중 선택을 의미한다.

    - reset은 폼 내부에 입력한 정보를 초기화합니다.

    - file은 multer 활용시 이미지나 동영상 등의 파일을 업로드하는 곳임

 - name : 각 input들을 구별하기 위한 고유한 이름 (method가 get 방식일 경우 form의 action 이후 name=값으로 붙어서 정보 전달) 단순한 이름이라 생각하기 쉽지만 추후 input을 통해 제출된 정보들이 객체의 name 키로 들어가는 것이 대부분이기 때문에 중요한 속성입니다.

 - id : name과 구별되는 속성이지만 혼동을 방지하기 위해 가급적이면 name과 같은 값을 줍니다.

 - required는 필수 여부입니다. 적지 않으면 false가 기본값입니다.

 - accept은 type: file 시 어떤 종류의 파일을 받아들일 것인지를 결정합니다. 예를 들면 accept="image/gif, image/jpeg, image/png"는 image 중 gif, jpeg, png만을 허용한다는 것이며 video/* 비디오의 모든 확장자를 허용한다는 의미입니다.

 - placeholder : input이 focus되기 전 까지 떠 있는 일종의 안내문

 - value : 해당 input의 값. input.value로 입력한 값을 사용할 수 있지만 태그 안에 적으면 기본값을 말함

<form action="http://localhost/login.php" method="post" enctype="multipart/form-data">
    <p>text : <input type="text" name="id" value="default value"></p>
    <p>password : <input type="password" name="pwd" value="default value"></p>
    <p>textarea : <textarea cols="50" rows="2">default value</textarea></p>
    <input type="submit">
    <input type="reset">
</form>

.form-container
  form(action=`/videos${routes.upload}`, method="post", enctype="multipart/form-data")
    label(for="file") Video File
    input(type="file", id="file", name="file", required=true, accept="video/*")

<form action="http://localhost/order.php">
  <h1>색상(단일선택)</h1>
    붉은색 : <input type="radio" name="color" value="red">
    검은색 : <input type="radio" name="color" value="black" checked>
    파란색 : <input type="radio" name="color" value="blue">
  <h1>사이즈(다중선택)</h1>
    95 : <input type="checkbox" name="size" value="95">
    100 : <input type="checkbox" name="size" value="100" checked>
    105 : <input type="checkbox" name="size" value="105" checked>
  <input type="submit">
</form>

 

Label

label에는 for, input에는 id를 주고 같은 값을 줌으로써 해당 태그가 무엇을 의미하는지 표시하게 됩니다. label 태그 내부에 포함시켜도 기능은 같습니다. 다른 기능이 있다기보다는 사용자에게 좀 더 명확한 정보를 주기 위해 사용됩니다. 라벨을 클릭해도 해당 태그를 누른 것과 동일하게 작동합니다.

<label for="your_pwd">
<input id="your_pwd" type="password" name="pwd">

<label> password
  <input type="password" name="pwd">
</labe>

 

 

 

Button

Button은 JS와 연동하여 onclick 함수를 처리할 때 사용되곤합니다. 그러나 이렇게 되면 html와 js가 뒤섞여서 관리하기 힘드므로 DOM을 이용해 addEventListener를 사용하는 것이 더 낫습니다.

<button onclick=""}>hello</button>

 

 

Dropdown list (select, option) 

<form action="http://localhost/color.php">
  <h1>색상</h1>
    <select name="color">
      <option value="red">붉은색</option>
      <option value="black">검은색</option>
      <option value="blue">파란색</option>
    </select>
  <h1>색상2 (다중선택)</h1>
    <select name="color2" multiple>
      <option value="red">붉은색</option>
      <option value="black">검은색</option>
      <option value="blue">파란색</option>
   </select>
   <input type="submit">
</form>