[23.09.04] 30일차
<<진도>>
Front-end
- form 태그
-HTML5 form
<<오늘의 팁>>
사용자 코드 조각 - html.json에
+추가) snippet
"langko html form": {
"scope": "html", // 범위
"prefix": "lko", // 단축키
"body": [ // [] 안이 실제 들어오는 내용
"<!DOCTYPE html>", // ,로 이어져야한다
"<html lang=\"ko\">",
"<head>",
"<title>$1</title>",
"<meta charset=\"UTF-8\">",
"<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
"</head>",
"<body>",
"$2",
"</body>",
"</html>"
],
"description": "lang korean 자동코드"
}
$1, $2는 탭을 1, 2번 하면 가는위치
** Emmet 약어 div#~~ id가 ~~인 <div>
div#header
<div id="header"></div>
url (출처. 모질라재단)
- http : hyper text transfer protocol (하이퍼 텍스트 전송 프로토콜)
웹 브라우저와 웹 서버가 ISO Latin1 영문자를 사용하여 서로 '통신'할 수 있도록 하는 프로토콜(네트워크에서 정보를 교환하는 방법을 기술하는 규칙)입니다.
- domain : 이름
- port : 데이터가 들어오고 나가는 문
(서버에서 지정해주고 클라이언트에겐 보통 안보인다)
- path to resource : 웹서버의 리소스 경로 .확장자는 생략추세
- parameter : 쿼리파라미터 라고도 함 / ? 다음에 오는 key(키)와 value(값)은 한 쌍
여러 개일 경우 &뒤에 한 쌍씩
- anchor : id에 해당
<< form 태그 >>
form-ex01
<!DOCTYPE html>
<html lang="ko">
<head>
<title>form</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!-- [action=""] 이동할 page / 요청page -->
<!--
client가 server에 데이터를 보낼 때 두가지 방식
method=“get / post” 방식
get : url(file 형태이기는 하다)에 데이터를 싣고 보내는 방식 : 처리 빠름,
/ 덧붙이는 데이터가 한정
post : 데이터가 page[file] 형태로 서버에 전달 : 쿼리파라미터가 url에
드러나지 않고 암호화되어 보안 효과->시간소요 / 데이터 제한없음.
-->
<form action="test.html" method="get">
<!-- [input] *name은 키key / 입력창 입력내용은 값value -->
<div>
<!-- [label] input 텍스트상자 앞에 이름 -->
<!-- for=""과 id=""를 동일하게 하나로 취급 -->
<label for="user_name">이름 : </label>
<input type="text" name="user_name" id="user_name">
</div>
<div>
<label for="user_id">아이디 : </label>
<input type="text" name="user_id">
</div>
<div>
<label for="user_pw">비밀번호 : </label>
<input type="password" name="user_pw" id="user_pw">
</div>
<!-- [radio] : 여러개 중 1개만 선택 / *같은 name 사용해야 한 묶음 인식 -->
<div>
<!-- **radio는 "value"를 직접 작성해야 서버로 전송됨(URL에 보임) -->
<!-- checked는 기본 선택상태 -->
<span>성별 : </span>
<label for="">남</label>
<input type="radio" name="gender" id="male" value="male" checked>
<label for="">여</label>
<input type="radio" name="gender" id="female" value="female">
</div>
<!-- [checkbox] 다중선택이 가능 -->
<div>
<!-- *checkbox도 "value"를 작성해야 서버로 데이터 전송 -->
<span>취미 : </span>
<label for="reading">독서</label>
<input type="checkbox" name="hobby1" id="reading" value="reading">
<label for="movie">영화감상</label>
<input type="checkbox" name="hobby2" id="movie" value="movie">
</div>
<hr>
<!-- [submt] 제출 버튼 / [value] 버튼안에 내용 -->
<input type="submit" value="전송">
</form>
</body>
</html>
form-ex02
<!DOCTYPE html>
<html lang="ko">
<head>
<title>form</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!-- action에 반드시 응답할 페이지가 있어야한다. 없으면("") 현재페이지 요청 -->
<form action="" method="get">
<!-- [fieldset] 칸 묶어주는 역할 / [legend] fieldset의 타이틀 -->
<fieldset>
<legend>회원가입</legend>
<div>
<label for="user_name">이름 : </label>
<!-- placeholder : 입력대기 문자표시 -->
<!-- autofocus : 자동 기본커서 위치 //일반적으로 속성만 있는 것을 맨뒤로 -->
<input type="text" name="user_name" id="user_name"
placeholder="이름을 입력하세요" autofocus>
</div>
<div>
<!-- [select], [option] value가 있어야 데이터 전송 -->
<label for="city">거주지역</label>
<select name="city" id="city" size="3" multiple>
<!-- * size="" 기본으로 보이는 양조절 (기본:1) -->
<!-- * multiple : 다중선택 가능하게 -->
<option value="seoul" selected>서울</option>
<!-- selected : 기본선택 지정 -->
<option value="incheon">인천</option>
<option value="daegu">대구</option>
<option value="jeju">제주</option>
</select>
</div>
<div>
<lable for="info">간단한 소개</lable><br>
<!-- [textarea] : 텍스트 박스 : 크기조정 가능
기본 크기 :
'cols' column열 (폰트에 따라 변동 - 대략적임)
'rows' row행 10줄
-->
<textarea name="info" id="info" cols="30" rows="10"
placeholder="간단한 소개를 작성하세요"></textarea>
</div>
</fieldset>
<div>
<input type="submit" value="회원가입">
<!-- *reset form안의 내용을 모두 지워버리는 기능 -->
<input type="reset" value="취소">
<!-- [button] value X, content로 내용을 넣어준다, 닫는 태그있음.
button은 js로 기능 지정해줘야한다 -->
<!-- <button type="button">회원가입</button> -->
</div>
</form>
</body>
</html>
[ HTML5 FORM ]
form-ex03
<!DOCTYPE html>
<html lang="ko">
<head>
<title>form</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<form action="test.html">
<fieldset>
<legend>HTML5 FORM</legend>
<div>
<label for="user_name">이름 : </label>
<!-- required : 필수 입력 정보 -->
<input type="text" id="user_name" name="user_name" autofocus required autocomplete="off">
<!-- autocomplete : 자동완성 저장여부 -->
</div>
<div>
<label for="user_email">이메일 : </label>
<!-- type "email"은 양식이 맞지않으면 재입력 알림 (~@~) -->
<!-- 유효성 검증을 client에서 처리하기 때문에 효율적임 -->
<input type="email" id="user_email" name="user_email" placeholder="이메일을 입력하세요">
</div>
<div>
<label for="user_url">웹사이트 : </label>
<!-- type "url"은 양식이 맞지않으면 재입력 알림 (http:~) -->
<input type="url" id="user_url" name="user_url" value="https://www.naver.com" readonly>
<!-- readonly : 써져있는 것을 변경 불가 -->
<input type="url" id="user_url" name="user_url" value="https://www.naver.com" disabled>
<!-- disabled : 아예 커서 포커스가 불가능 -->
</div>
<div>
<label for="order">주문수량 : </label>
<!-- "number"는 숫자만 입력되고 수량 편하게 조절가능 -->
<input type="number" id="order" name="order" min="0" max="5">
<!-- min 최소값 max 최대값 지정 -->
</div>
<div>
<label for="user_date">제출일</label>
<!-- 달력 제공 (max/min 선택범위 시작/끝 날짜 선택가능)-->
<input type="date" id="user_date" name="user_data" min="2023-09-03">
</div>
<div>
<label for="user_color">색선택</label>
<!-- color 선택 (value : 초기색 값)-->
<input type="color" id="user_color" name="user_color" value="#ff0000">
</div>
</fieldset>
<input type="submit" value="가입하기">
</form>
</body>
</html>
'학습 기록 > FE (React, JS, HTML, CSS, ...)' 카테고리의 다른 글
| 230907 [CSS] text, list, border, width, height, box-model, background, background-image (0) | 2023.09.07 |
|---|---|
| 230906 [CSS] font, text (1) | 2023.09.06 |
| 230905 HTML 기본구조, CSS, selector 선택자 (0) | 2023.09.05 |
| 230901 HTML태그 a, heading, dfn-abbr-cite-small, img, list, table, pre 등 (0) | 2023.09.03 |
| 230831 Front-end 프론트엔드 - VScode, HTML, DOM, element, tag, meta, p, strong, em, mark, block과 inline (0) | 2023.08.31 |
