👉 <Form>

<form> 은 사용자로부터 정보를 받아 서버에 전송하는 요소이다.

<form action="" method=""></form>

• action = <form>의 데이터를 처리할 서버에 접근 가능한 url을 적는 특성 (API 주소)
• method = <form>가 서버로 제출 될 때 사용되는 HTTP 메서드

<form> 안에는 한개 이상의 element가 포함될 수 있다.

• <input>
• <label>
• <radio & checkbox>
• <select & option>
• <textarea>
• <button>

👉 <input>

<input> 은 사용자가 입력할 수 있는 입력창을 만들어주는 요소이며 여러가지 type 들이 존재한다.

<input type="text" placeholder="안녕하세요" maxlength="5"></input>
<input type="date"></input>
<input type="color"></input>
<input type="file"></input>
<input type="text" required></input> --> 반드시 입력해야하는 칸
<input type="text" disabled></input> --> 입력을 막아놓는 칸
<input type="text" value="안녕"></input> --> 복사를 할 수 있는 칸 생성
<input type="email" placeholder="e-mail을 입력하세요"></input>
<input type="password" placeholder="비밀번호"></input>

Form Validation

• type 중 email , password , required 등으로 설정하게 되면 형식에 맞는 input을 요구할 수 있다.

input에 label 붙여주기

내가 작성했던 <input> 요소에 대한 설명을 나타낸다.

<label>을 사용할 때에는 for 라는 특성이 필요한데 input에 사용한 id 값과 for 값이 동일해야한다.

<form>
<label for="username">Username :</label>
<input id="username" type"text" required></input>
</form>

Username :

👉 <radio> & <checkbox>

<radio> 는 여러 선택지 중 한가지만 선택 가능한 요소이다.

<form>
 <label for="candy">candy :</label>
  <input id="candy" name="food" type="radio"></input>
 <label for="chocolate">chocolate</label>
  <input id="chocolate" name="food" type="radio"></input>
 </form>
 </form>

candy chocolate

• <radio> 를 사용할 때에는 name="" 이라는 특성이 있다 이유는 2개 이상의 input이 서로 연결되어 있다는 증거가 없기 때문에 만약 name이 없다면 input개인 요소 하나로 작동되기 때문에 2개중 1개 선택이 불가능하다.

---

<checkbox> 는 여러 선택지 중 여러가지 선택 가능한 요소이다.

 <form>
 <label for="html">html</label>
  <input id="html" name="skills" value="html" type="checkbox"></input>
 <label for="css">css</label>
  <input id="css" name="skills" value="css" type="checkbox"></input>
 </form>

html css

• checkbox 사용할 때 value값을 주게 되면 다중 선택하여 제출됐을 때 주소창에 어떤것을 선택했는지 value값으로 나타내어진다.

👉 <select> & <option>

<select> 는 옵션 메뉴를 제공하는 컨트롤을 나타낸다.
<option> 은 풀다운 안 요소의 항목을 정의한다.

<select name="pets" id="pet-select">
   <option value="">--Please choose an option--</option>
   <option value="dog">Dog</option>
   <option value="cat">Cat</option>
</select>

--Please choose an option-- Dog Cat

👉 <textarea>

<textarea> 는 여러 줄에 걸쳐서 많은 양의 글을 받을 때 사용한다.

<label for="field">자기소개</label>
<textarea id="field" placeholder="자기소개"></textarea>

자기소개

👉 <button>

<button> 은 요소는 클릭 가능한 버튼을 나타낸다.

<button type="button">버튼</button>
<button type="submit">버튼</button>
<button type="reset">버튼</button>

버튼
버튼
버튼

<submit> : 버튼이 서버로 양식 데이터를 제출합니다. 지정하지 않은 경우 기본값이며, 유효하지 않은 값일 때도 사용합니다.
<reset> : <input type="reset">처럼, 모든 컨트롤을 초깃값으로 되돌립니다.
<button> : 기본 행동이 없으며 클릭했을 때 아무것도 하지 않습니다. 클라이언트측 스크립트와 연결할 수 있습니다.