오늘 수업은 form 태그를 배웠는데 사실 무슨 소리인지 잘몰라서 엄청 헤맸다 ㅎㅎ..😂
지금 열심히 복습하면서 수업했던걸 깨달았다,,(역시 복습은 최고!)
내일은 더 정신바짝차리고 들어야겠다 하.하.하
분명 똑같이 썼는데 자꾸 내가 원하는 답이 안나와서 답답했는데 알고보니 새로고침을 안한거였다🤓(멍청이..)
① <form> : 사용자로부터 입력을 받을 수 있는 HTML 입력 폼을 정의할 때 사용하는 태그이다.
- 사용자로부터 입력 받아야하는 부분을 표현해야하기 때문에 다양한 속성이 존재한다.
| 속성명 | 속성값 | 설명 |
| action | URL | 폼 데이터가 서버로 제출될 때 해당 데이터가 도착할 URL을 명시 |
| method | ① get ② post |
폼 데이터가 서버로 제출될 때 사용되는 HTTP 메소드를 명시 |
| name | 텍스트 | <form> 요소의 이름을 명시 |
| taget | ① _blank ② _self ③ _parent ④ _top |
폼 데이터를 서버로 제출한 후 받은 응답이 열릴 위치를 명시 |
| accept-charset | 문자셋 | 폼 데이터가 서버로 제출될 때 사용되는 문자 인코딩 방식을 명시 |
| enctype | ① application/x-www.form-urlencoded ② multipart/form-data ③ text/plain |
폼 데이터가 서버로 제출될 때 해당 데이터가 인코딩되는 방법을 명시(단 <form> 요소의 meth 속성값이 'post'인 경우에만 사용 가능) |
| autocomplete | ① on ② off |
<form> 요소에서 자동 완성 기능을 사용할지 여부를 명시 |
| novalidate | novalidate | 폼 데이터가 서버로 제출될 때 해당 데이터의 유효성을 검사하지 않음을 명시 |
* <input>
| 속성 | 설명 |
| text | 텍스트(문자)를 쓸 수 있는 글상자를 만드는 태그 * name : 글상자의 이름을 정해주는 속성(데이터 전송시 필요) * autofocus : 웹페이지가 열릴 때 커서가 있는 곳을 지정 |
| password | 비밀번호를 쓸 수 잇는 글상자를 만드는 태그 * placehold : 글상자의 그림자처리된 기본값을 주는 속성 * autocomplete : 자동완성기능을 켜거나 끄는 것을 지정 |
| hidden | 사용자에게 보이지 않게 데이터를 보낼 수 있는 태그 * value : 데이터의 기본 값을 지정해주는 속성 |
| submit | 서버에 데이터를 제출하는 버튼을 만드는 태그 |
| reset | 사용자가 입력한 데이터를 모두 초기화하는 버튼을 만드는 태그 |
| number | 숫자만 쓸 수 있는 textfield를 만드는 태그 * min : 최소값을 주는 속성 * max : 최대값을 주는 속성 |
| date | 날짜를 선택할 수 있는 UI를 만드는 태그 |
| color | 색을 선택할 수 있는 UI를 만드는 태그 |
| email형식을 쓸 수 있는 글상자를 만드는 태그 | |
| month | 달(월)을 선택할 수 있는 UI를 만드는 태그 |
| range | 범위를 설정할 수 있는 UI를 만드는 태그 * min : 최소값을 주는 속성 * max : 최대값을 주는 속성 |
| search | 검색할 글을 입력할 수 있는 글상자를 만드는 태그 |
| tel | 전화번호를 쓸 수 있는 글상자를 만드는 태그 |
| time | 시간을 선택할 수 있는 UI를 만드는 태그 |
| url | url을 쓸 수 있는 글상자를 만드는 태그 |
| week | 주를 선택할 수 있는 UI를 만드는 태그 |
| datetime | 날짜와 시간을 쓸 수 있는 글상자를 만드는 태그 |
| datetime-local | 지역의 날짜와 시간을 쓸 수 있는 글상자를 만드는 태그 |
호에에,,, 내가 배운 것보다 훨씬 많은 속성이 있어서 당황스럽다 ,,🙄
나는 간단하게 아이디/비밀번호 입력창, 선택창을 간단하게 만들어보았다 !
② 실습(코딩)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>form2-practice</title>
</head>
<body>
<form action="" method="" enctype="">
<fieldset> → 여러 개의 폼 요소를 그룹화하여 구조적으로 만들기 위해 사용한다.
<legend>입사지원 정보</legend> → 폼 요소의 제목으로 <fieldset> 내부에 작성한다.
<p>
<label>아이디(e-mail) : <input type="text"></label> @
<!-- → <label> input 태그에 써 줄 수 있는 제목이다 라벨 가능 요소를 참조하거나 콘텐츠로 포함된다.
label 태그 안에 for라는 속성을 사용하면 체크박스 뿐만아니라 텍스트를 클릭해도 체크박스에 체크가 가능하다!
→ <input> 사용자가 입력값을 줄 수 있게 하는 UI를 만드는 태그이다. -->
<select>
<option value="">선택</option>
<option value="naver">naver.com</option>
<option value="gmail">gmail.com</option>
</select>
</p>
<p>
<label for="">비밀번호 : <input type="text"></label>
</p>
<p>
<label for="">휴대전화 :
<select>
<option value="">통신사 선택</option>
<option value="sk">sk</option>
<option value="kt">kt</option>
<option value="lg">lg</option>
</select>
<input type="text"> - <input type="text"> - <input type="text">
</label>
</p>
<p>
<label>직군 : </label>
<input type="radio" name="job" id="designer">
<label for="designer">디자이너</label>
<input type="radio" name="job" id="developer">
<label for="developer">개발자</label>
</p>
<p>
<label>희망 근무지(* 복수선택 가능) : </label>
<input type="checkbox" name="work place" id="LA"><label for="LA">LA</label>
<input type="checkbox" name="work place" id="tokyo"><label for="tokyo">도쿄</label>
<input type="checkbox" name="work place" id="london"><label for="london">런던</label>
<input type="checkbox" name="work place" id="singapore"><label for="singapore">싱가폴</label>
</p>
<input type="button" value="입시지원 완료">
</fieldset>
</form>
</body>
</html>
🥇완성된 작업물🥇
이렇게 완성!!(짠)
폼을 이렇게 만드는구나하면서 나는 참 쉽게 쓰고 확인눌렀는데 역시 만드는 사람은 힘들구나 싶었다,,ㅠㅠ
개발자들은 이런 건 쉽게 만들겠지 생각하니 앞길이 컴컴한 거 같다 😂 화이팅,,,
'웹 > HTML' 카테고리의 다른 글
| [코딩 공부_09] DEFLIX 완성하기 (0) | 2021.02.22 |
|---|---|
| [코딩 공부_08] 웹 사이트와 웹 페이지의 구조 알아보기 (0) | 2021.02.19 |
| [코딩 공부_06] HTML로 위키피디아 페이지 만들기! (0) | 2021.02.16 |
| [코딩 공부_05] HTML의 각종 태그들 정리 (0) | 2021.02.15 |
| [코딩 공부_04] HTML, 웹을 이루는 근간 (0) | 2021.02.13 |
댓글