2022. 12. 20. 13:58ㆍProgramming/HTML
- 버튼
버튼을 만드는 방법은 크게 두 가지가 있다.
1. <button> 을 이용
2. <input> 을 이용
또한 <button>을 <form>의 자식 태그로 사용한 경우와 그렇지 않은 경우로 나누어 생각할 수 있다.
1. <form>의 자식 태그로 <button>을 사용한 경우
ㄴ default는 type="submit" 이며, type속성을 아예 입력하지 않은 것과 동일하게 동작한다.
<form> 태그의 action속성에 지정한 곳으로 <button>의 value를 제출한다.
* 폼 형식에서 제출 버튼을 만들기 위해선 <input>이든 <button>이든 type=“submit” 이어야 한다.
아래의 두 방법은 동일한 기능을 한다.
방법1. <button> 태그 사용
<button>Create a account</button>
방법2. <input> 태그 사용
<input type="submit" value="Create a account">
2. <button>이 <form>의 자식태그가 아닌 경우
ㄴ default가 type=“button”이며, type속성을 아예 입력하지 않은 것과 동일하게 동작한다.
* 폼을 제출하지 않는 버튼을 만드려면 type="button" 이어야 한다.
아래의 두 방법은 동일한 기능을 한다.
방법1.
<button type="button">Create a account</button>
방법2.
<input type="button" value="Create a account">
- button을 활용한 구글 검색 폼 제작 예시
* 쿼리 : 웹 서버에 특정 정보를 보여달라는 웹 클라이언트 요청
구글에 “something”을 검색한다면
에서 다른 부분을 전부 빼고 검색 쿼리만 남겨도 잘 작동하는지 확인
https://www.google.com/search?q=something
에서 검색쿼리는 <input>의 name=“q”를 따른다.
물음표와 name속성 값을 뺀 주소만을 남긴다.
을 <form action=“”>에 넣는다.
결과물 :
코드 :
<form action="https://www.google.com/search">
<label for="google">Search google : </label>
<input type="text" id="google" placeholder="Enter a search term" name="q">
<button>Search</button>
</form>
button을 눌렀을 때(=엔터칠 때) 폼데이터가 제출되면서 해당 URL로 이동함
다른 사이트도 위와 같이 구현 가능
- checkbox와 radio
ㄴ <input> 태그의 type="radio" 와 type="checkbox" 에 대해 다룬다.
1. checkbox
ㄴ 복수 선택 가능
ㄴ checked 속성 : default로 체크 되어있게 한다.
ㄴ 폼에서 제출 했을 때의 결과
체크하면 -> ' <input>의 name속성 값 = <input>의 value속성 값 ' 의 형태(name-value쌍)로 서버에 전송된다(URL에 표시)
체크 안하면 -> input name 속성을 URL에서 생략함
예시코드)
2. radio
ㄴ 중복 선택 불가(같은 name 속성끼리 연결 되어야 중복 선택 불가)
ㄴ name과 value속성 필수, label 속성 (거의)필수 (웹 접근성)
ㄴ 폼에서 제출 했을 때의 결과
체크하면 -> ' <input>의 name속성값 = <input>의 value 속성값 ' 형태로 서버에 전송됨
체크 안하면 -> <input>의 name 속성을 URL에서 생략함
ㄴ name 속성
radio 버튼을 중복 선택 불가능하도록 그룹화 하려면 <input>의 name 속성값이 같아야 한다.
ㄴ value 속성
value 속성을 지정하지 않은채로 폼 양식을 제출하면,
서버 측에서 name속성의 radio 항목 중에서 사용자가 어떤 걸 선택했는지 알 수 없다 (URL에 value속성 값이 "" 로 생략됨)
사용자가 어떤 선택했는지 알아야 하므로 반드시 value 속성을 사용해야 한다!
ex)
<form action="choice">-> form action의 값?/선택된 input “name”=on & 선택된 radio=“value” 의 형태로 나옴
file:///C:/Users/%EC%86%A1%EC%A7%80%ED%9B%88/Desktop/development/choice?check=on&radio=q1_a5
- select와 option
ㄴ <select>는 <option>을 한 그룹으로 묶는다.
ㄴ <option>내용</option>처럼 option은 열고닫는 태그 사이에 내용이 들어가는 형태
ㄴ option의 value 속성은 radio와 마찬가지로 선택한 form data를 제출하면 서버에 전송한다.
ㄴ <checkbox checked>와 유사하게, <option selected>를 사용해 default로 특정 option을 선택 되도록 표시할 수 있다.
ㄴ <option> 이 선택해야 하는 내용 중 하나가 아니라, placeholder처럼 선택하라는 안내 문구인 경우
-> <option value="">여야 함. 이때, <select required> 일 경우 <option value=""> 를 선택하면 폼 제출 불가
ㄴ select는 input과 마찬가지로 name, id 속성이 들어가고, 이것들을 통해 label과 연결할 수 있다.
<input id="내용1">과 <label for="내용1"> 에서 "내용1" 부분이 같아야 하는 것처럼,
<select id="내용2">과 <label for="내용2">에서 "내용2" 부분이 같아야 한다.
ex) select, option 활용한 이메일 폼 양식
결과 :
코드 :
<form action="form_action_part">
<label for="email_input">Enter a email : </label>
<input type="text" id="email_input" name="email_id" placeholder="Enter your email ID">
<label for="email_select">@</label>
<select name="email_address" id="email_select" required>
<option value="" selected>--Please choose an option--</option>
<option value="naver">naver.com</option>
<option value="google">google.com</option>
<option value="daum">daum.net</option>
</select>
<button>select email</button>
</form>
제출한 폼데이터는 다음과 같은 URL로 표시된다.
ex) file:///C:/Users/%EC%86%A1%EC%A7%80%ED%9B%88/Desktop/development/form_action_part?email_id=jun_dev&email_address=naver
여기서 밑줄 친 부분은 아래와 같이 해석할 수 있다.
(form태그 action 속성값)?(input태그 name 속성값)=(input에 제출한 데이터)&(select 태그 name 속성값)=(선택한 option태그 value 속성값)
- datalist와 option
ㄴ <datalist>의 id속성과 <input>태그의 list속성을 똑같이 입력하면 연결된다.
연결될 경우, 사용자가 입력필드를 클릭하거나 입력할 때 자동으로 드롭다운 메뉴(option 항목)가 나타난다
연결되지 않았다면, 사용자가 입력필드에 입력하더라도 드롭다운 메뉴가 나타나지 않는다.
예시 코드 :
<form action="">
추천 검색어
<input type="text" list="programming-language">
<datalist id="programming-language">
<option value="javascript">javascript</option>
<option value="java">java</option>
<option value="python">python</option>
</datalist>
</form>
* datalist와 select와의 차이
ㄴ <select>는 주어진 항목 안에서만 선택해야 함
ㄴ <datalist>는 주어진 항목에서 선택할 수도 있고 사용자가 직접 값을 입력할 수도 있다
- 유효성 검사(validation)
ㄴ input에 대한 입력 조건 제한 추가 또는 데이터의 유효성 확인하는 것
ex) 반드시 입력, 특정 수 이상/이하, 몇자리 이상/이하 입력 등의 조건
ㄴ 유효성 검사는 클라이언트와 서버 양쪽에서 한다. 어떤 한 곳에서 통과될 수 있지만 양쪽 모두에서 통과되어야만 한다. ㄴ 여기서 다루는 부분은 클라이언트에서의 유효성 검사이다.
required 속성
ㄴ 필수 입력으로 만든다.
ㄴ 어떤 브라우저를 사용하느냐에 따라 에러 메시지가 다르게 나온다(안 나올 수도 있다.)
minlength, maxlength 속성
ㄴ 몇자리 이하, 몇자리 이상으로 입력 제한
min, max 속성
ㄴ 특정 값 이상, 이하로 입력할 수 있도록 설정 가능
ex)
결과 : type="number" 에 음수 입력시 폼 제출 불가
코드 :
<form action="vol">
<p>
<label for="volume"> Volume : </label>
<input type="range" id="volume" name="size" min="0", max="100", value="50", step="1">
<button>submit</button>
</p>
</form>
<form action="num">
<p>
<label for="num_form"> Number : </label>
<input type="number" id="num_form" name="number_is" min="0" max="100" value="50" step="5">
<button>submit</button>
</p>
</form>
- 유효성 검사가 default 인 경우(특정 input type에 대해)
-> pattern 이라는 attribute(속성)이 있기 때문
<input type="email">
ㄴ @가 포함되어야 하며, @앞과 뒤에 글자가 있어야 함 (이메일 형식)
ㄴ 주의 : 진짜로 존재하는 이메일인지는 서버에서 확인함. 여기서는 확인(X)
<input type="url">
ㄴ http:// 나 https://를 포함한 URL이어야 함
* Regular expression(정규 표현식) 참고 : 추후 내용 보완 예정
ㄴ 이걸 사용하면 유효성 검사 매우 편리
ㄴ 상세한 조건을 걸고 유효성 검사 가능
ex) 비밀번호 8자 이상, 비밀번호에 소문자, 대문자, 숫자, 특수문자 포함, 스페이스는 없어야 한다
'Programming > HTML' 카테고리의 다른 글
| 간단한 폼(form) 만들기 (0) | 2022.12.20 |
|---|---|
| HTML 태그와 속성 (0) | 2022.12.19 |
| HTML 파일의 기본구조 (0) | 2022.07.11 |
| HTML의 탄생 (0) | 2022.07.08 |