Javascript(HTML form #2)
알고보니 form의 기본 내용들을 정리한 부분을 읽지 않아 그냥 넘어갔었네요, 다시 정리합니다.
Form의 작동원리
form은 정보를 수집하는 방법 이다. 정보를 수집하고 나서는 그 정보를 어디론가 보내야 하는데 그래서 쓰이는 속성이 action과 method 이다. 이 부분은 HTTP와 관련된 부분이 있다. method는 정확히 말하면 어떠한 HTTP 요청을 실행하게 할 것인가를 값으로 가진다.
다음은 form의 기본 골격이다.
action으로 정보를 보낼 곳을 지정했고 method로 어떤 방법으로 정보를 보낼 것인가를 지정해주었다. method 뒤에 오는 문자는 소문자로 써도 괜찮지만 관습적으로 대문자로 쓰고 있다.
ex) POST, GET
<form action="/example.html" method="POST">
</form>
다음과 같이 안에 h1이나 p처럼 일반 텍스트 요소를 넣어 꾸밀 수도 있다.
<form action='/practice.html' method='POST'>
<h1>This is Davie's Burgers</h1>
<p>Rate how much You enjoyed our meal</p>
<input type='range' min='1' max='100' step='1'>
<input type='submit'>
</form>
Input 에 사용되는 Type 총 정리
Text input
iput의 type으로 text를 주면(text가 기본값이다) 입력할 때 텍스트를 입력할 수 있는 입력칸을 활성화 시킨다. 또한 input tag에는 꼭 name을 할당해줘야 하는데, name 속성이 없으면 submit버튼을 눌러 <form>데이터를 제출하더라도 데이터가 전송이 되지 않는다.
예시
<form action="/example.html" method="POST">
<input type="text" name="example-name">
</form>
아래와 같은 입력창이 있다고 하자. 그랬을 때 입력된 Davie라고하는 문자열이 input의 속성 value의 값이 된다. 이처럼 입력되는 값이 value의 값이 되고, 이 값은 전송될 때 name 속성과 하나로 묶여 전달된다.
예를 들면 위 코드와 연계하면, /example.html로 전달되는 값은 example-name-Davie 가 된다. 또한 value 속성을 미리 지정함으로서 네모칸에 기본적으로 입력되어있는 값을 미리 만들 수도 있다.
Label 지정하기
이전 포스팅에서 참고형식으로 작성 해놓은 것이 있지만 다시 요약을 하자면 label은 오프닝과 클로징 태그가 있고 , 그 사이에 위치한 텍스트를 화면에 텍스트로 표현한다. for 라고하는 속성을 input 태그의 id 속성과 같은 값을 지정하여 서로 연결할 수 있다.
그렇게 하면 가장 큰 특징은 , label에 주어진 텍스트를 클릭하더라도 바로 input값이 위치한 빈 칸 등을 커서가 깜빡이거나, 체크박스 형식이라면 체크박스의 체크가 활성화 된다는 점이다.
Password Input
type=’password’를 활용하여 패스워드 값을 보이지 않게 하는 입력창을 생성할 수 있다. 위와 마찬가지로 데이터가 전송될 때는 name - password입력값 형태로 전송되게 된다.
<form>
<label for="user-password">Password: </label>
<input type="password" id="user-password" name="user-password">
</form>
Number Input
type=’number’를 사용하면 숫자값을 입력하게 할 수 있다. 숫자값과 일부 + , - , . 세 개의 특수문자만을 입력할 수 있다. 또한 step =’숫자‘ 값을 지정해서 지정된 step 수만 큼 올랐다 내려갔다 할 수 있게 하는 화살표 바를 추가할 수 있다. 예시는 다음과 같다.
<form>
<label for="years"> 공부한 연차: </label>
<input id="years" name="years" type="number" step="1">
</form>
Range input
type=’range’를 사용하면 마우스로 조절할 수 있는 가로형태의 슬라이더 바를 제공한다. min 과 max를 활용해서 최소 최댓값을 지정할 수 있고 step을 활용해서 그 바가 얼마나 부드럽게 커지거나, 작아지는지(커지는 단위 조절)를 조절할 수 있다.
이 때 value 값은 사용자가 지정한 마지막 슬라이더 바의 값이 된다.
<form>
<label for="volume"> Volume Control</label>
<input id="volume" name="volume" type="range" min="0" max="100" step="1">
</form>
또 다른 예시는 다음과 같다. 보통 아래처럼 section 태그 안에 넣어 semantic 한 HTML을 만드는 것이 보편적이다.
<section class="cooked">
<label for="doneness">How do you want your patty cooked</label>
<br>
<span>Rare</span>
<!--Add your code below-->
<input id='doneness' name='doneness' type='range' min='0' max='5' step='0.5'>
<span>Well-Done</span>
</section>
Checkbox Input
말그대로 체크박스를 보여준다.
type =’checkbox’를 활용한다. 이러한 작은 크기의 input을 활용할 때 label의 쓰임이 커진다. 사용자의 편의성이 커진다.
예시
<form>
<p>Choose your pizza toppings:</p>
<label for="cheese">Extra cheese</label>
<input id="cheese" name="topping" type="checkbox" value="cheese">
<br>
<label for="pepperoni">Pepperoni</label>
<input id="pepperoni" name="topping" type="checkbox" value="pepperoni">
<br>
<label for="anchovy">Anchovy</label>
<input id="anchovy" name="topping" type="checkbox" value="anchovy">
</form>
위 예시를 보면 알겠지만 각각 name은 같게 주어 이 세개의 체크박스가 하나의 그룹으로 이루어진것을 표현했고 , value값은 사용자의 눈에 보이지 않는 값으로 이용자는 label을 보고 값을 고르게 된다. id와 for은 주어진 value값과 같게 유지된 것을 확인 할 수 있다 .
Radio button input
라디오 버튼이라고 하는 것은 동그란 형태의 선택창을 말한다. 체크박스와는 다르게 복수 선택이 불가능하고 하나만 선택할 수 있다.
<form>
<p>What is sum of 2-0?</p>
<input type="radio" id="two" name="answer" value="2">
<label for="two">2</label>
<br>
<input type="radio" id="minusTwo" name="answer" value="-2">
<label for="minusTwo">-2</label>
</form>
Dropdown list
라디오 등과는 다르게 만약 입력받아야할 값이 여러개 라면 이 타입을 활용할 수 있다.
예시는 다음과 같다.
<form>
<label for="lunch">점심 뭐먹음?</label>
<select id="lunch" name="lunch">
<option value="김치에 스팸 캬~">김치에 스팸 캬~</option>
<option value="볶음밥">볶음밥</option>
<option value="햄버거">햄버거</option>
<option value="라면">라면</option>
<option value="타코">타코</option>
</select>
</form>
다음과 같이 뜬다.
태그로 select를 사용하는 것과 아이템들의 목록은 option을 사용하는 것에 유의하고, value가 전달 될 때는 select의 name과 합쳐져서 ‘lunch=햄버거’와같은 식으로 전달된다.
Datalist Input
위의 dropdown list로 표시하기에도 너무 많은 데이터라면 어떨까? 이럴 때 등장하는 개념이 datalist input이다. 이 타입은 <input type=’text’>와 함께 쓰인다. 아래 예시를 보자.
<form>
<label for="town">Ideal town to live?</label>
<input type="text" list="towns" id="town" name="town">
<datalist id="towns">
<option value="마을1"></option>
<option value="마을2"></option>
<option value="마을3"></option>
</datalist>
</form>
input의 list와 datalist의 id가 상호작용하는 것을 볼 수가 있다. 이처럼 input과 datalist를 연결지어야 올바른 형식의 datalist를 만들 수 있다.
Textarea element
input=’text’는 입력을 한 줄로만 받지만, 블로그 포스팅 처럼 여러 줄의 입력을 받을 때는 이 속성을 사용할 수 있다.
<form>
<label for="blog">New Blog Post: </label>
<br>
<textarea id="blog" name="blog" rows="5" cols="30">
</textarea>
</form>
기본값을 입력해놓고 싶다면 해당 태그의 오프닝 클로징 사이에 값을 입력하면 된다 .
col 과 row로 어느정 도의 행과 열로 글자를 입력하게 할지 배열이 가능하고, 실제 출력화면에서는 사용자가 텍스트 박스의 크기를 조절 할 수도 있다.
<textarea>Adding default text</textarea>
Submit Form
제출 버튼을 만드는 속성입니다.
type=’submit’ 으로 작성하면 기본형태의 버튼이 나타납니다.
지정하는 value 값에 따라 표시되는 텍스트가 다릅니다. 아래와 같은 경우에는 Send라고 적힌 버튼을 생성합니다.
<form>
<input type="submit" value="Send">
</form>
일단 오늘은 여러가지 Form에 사용되는 속성들을 정리해보았습니다.
자세한 내용은 MDN을 참고해주시면 감사하겠습니다.
'IT 관련 > 개발(Codecademy)' 카테고리의 다른 글
| 크롬 스크린리더 설치기 , 웹 접근성에 관해 도움이 되는 사이트 모음 (0) | 2023.01.17 |
|---|---|
| JavaScript HTML form을 활용한 유효화 검사(pattern, 정규표현식 등 ) (1) | 2023.01.12 |
| Javascript(유효화 검사, 정규표현식) (1) | 2023.01.12 |
| 자바스크립트(이벤트란?) (2) | 2023.01.10 |
| Javascript (onclick 등 다양한 속성 및 메소드) (1) | 2023.01.09 |