HTML Form / input 태그 정리[TIL 7일차]

<Form>

사용자로부터 어떤 정보나 데이터를 받기 위한 태그
주의해야할 것은 Form을 사용한다는 것은 사용자로부터 무엇인가를 받고 그것을 처리하는
과정도 같이 들어가야 한다는 점
form을 사용할 경우 반드시 2가지 속성을 기재해주어야함.

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

action: 처리할 로직이 있는 URL을 적음
method: 서버쪽과 긴밀하게 연결되어져 있으며 get과 post를 사용함

GET: 단순히 정보를 '읽고(read)' 싶을 때
POST: 사용자가 입력한 값을 '저장'하고 싶을 때

Form#1 <input>

/ Syntax alert: type을 반드시 기재해주어야 함.

<input type="text/>

input 태그의 속성

placeholder="" : 아무것도 값이 없을때 기본적으로 보여주는 text
maxlength="" : input창에 작성할 수 있는 문자의 갯수를 제한하기 위한 속성
minlength="" " input창에 작성할 수 있는 문자의 최솟값을 제한하기 위한 속성
min="" : 입력할 수 있는 수의 최소값
max="" :입력할 수 있는 수의 ,최대값
disable : input창을 사용하지 못하게 막아둠
required : 필수로 입력을 하지 않으면 동작하지 않게 하는 속성
value : placeholder와 비슷한 속성이지만, value는 그 값을 복사할수 있음, placeholder는 복사가 불가능

input 창<input type="text" placeholder="이렇게하면 될지도" maxlength="12" minlength="3" required>

input의 type

text : text를 기재하는것
email: text와 비슷하지만 다름, 이메일(@)을 입력하지않으면 넘어가지 않음.
password: 비밀번호 적용하는것
url: url을 이상한값을 적용하면 경고가뜸
number: 숫자로 값을 받기 위한것.
file: 이미지 첨부할수 있게끔 하는것 , 특정 파일을 제한 하는법 accecpt=".jpg, .pdf"
tel: 전화번호를 적을수 있음.

<input type="text" placeholder="text를 적으세요">
    <input type="email" placeholder="email을 적으세요 @을 입력하지 않으면 안됨">
    <input type="password" placeholder="Password를 입력하세요">

결과값

Form#2 <input>

form 양식에 이름을 붙이는 태그
syntax alert:

<label for="누구"> 라벨 </label>
<input type="text" id="user-name"/>

결과

라벨

Form#3 <Radio &Check box>

Radio : 여러가지 항목중에서 1가지만 선택이 가능하게끔 하는것.

Radio사용시 반드시 적어야하는 attribute가 2개가 있음.
1. name : input type radio간 서로 연관이 있는것을 알려주기 위함
2. value: : 어떤 하나의 항목이 선택이되어 서버에게 전달할때 구분을 하기 위해 각기 값을 설정해야 하는 값

check box: 여러가지 항목중에서 다중선택을 가능하게끔 하는것.
radio와 하는것은 같음

<input id="HTML" name="skills" value="html" type="checkbox"/>

<label for="HTML">HTML</label>



<input id="CSS" name="skills" value="css" type="checkbox"/>

<label for="CSS">CSS</label>


<input id="JavaScript" name="skills" value="javascript" type="checkbox"/>

<label for="JavaScript">JavaScript</label>

결과창

HTML
CSS
JavaScript

Form#4 <Select &Optin>

Select 여러개중 하나를 고르는 것

   <form action="" method="get">

        <label for="skill">스킬</label>

        <select multiple name="skills" id="skill">

            <option value="html">HTML</option>

            <option value="css">CSS</option>

            <option value="js">JavaScript</option>

        </select>

        <button type="submit">

            submit

        </button>

    </form>

결과값

스킬 HTML CSS JavaScript submit

### Form#5 <Textarea

<input type="text">는 한줄이상 기재가 불가능하지만
Textarea를 사용하면 그 이상을 사용가능함.

<textarea id="filed" cols="10" rows="10" placeholder="자기소개를 입력하세요"></textarea> 

결과값

Form#6 <button>

type이 총 3(button, submit, reset)개가 있으며 실제로 사용하는것은 두개
※버튼을 사용할떄는 반드시 type값을 적어야됨.
무엇인가를 제출하는데 사용하는것이라면 sumbit
그외에는 button값을 쓰면됨
reset은 입력한 값을 리셋하는용도