|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TEST</title>
</head>
<body>
<!--form 태그 - input 태그의 틀(ex. 로그인창)
action = 입력받은 정보를 전송할 위치(URL, 파일)
method = 전송할때 송신 방식 get, post 2가지 값이 있다.-->
<form action="#" method="get">
<!--input 자용자의 정보 입력이 필요할때 쓰는 태그
속성 type - 입력 태그의 유형
name - 서버로 전송될때 필요한 이름(id비슷한거?)
value - 입력 태그의 초기값
pattern - 지정된 형식이 맞는지 검사
required - 값을 넣어야 제출이 되도록 설정
autofocus - 페이지가 열릴때 자동으로 특정한곳에 위치
placeholder - 입력필드에 흐릿하게 설명-->
<!--로그인 화면(ID)을 꾸밀때 사용-->
ID : <input type="text" name="text" placeholder="홍길동" required autofocus> <br><br>
<!--로그인 화면(PASSWORD)을 꾸밀때 사용(TEXT가 표기 되지않음)-->
PASS : <input type="password" name="password" placeholder="비밀번호"> <br><br>
<!--전화번호 형식 입력-->
전화번호 : <input type="tel" name="usertel" placeholder="010-0000-0000" pattern="(010)-\d{3,4}-\d{4}"> <br><br>
<!--숫자만 입력 가능-->
숫자 : <input type="number" name="number" placeholder="12345687890"> <br><br>
<!--검색어를 입력할 수 있는 텍스트 필드-->
검색 : <input type="search" name="search" placeholder="search"> <br><br>
<!--같은 form안에 있는 여러개중 하나만 선택할 수 있다.(다음 페이지, 페이지 선택)
주의사항으로는 name값은 모두 같아야 한다. name가 없으면 모두 체크, 해제가 가능하다.-->
1번. <input type="radio" name="radio" > <br>
2번. <input type="radio" name="radio" checked> <br> <!--checked로 인해 2번에 기본 체크-->
3번. <input type="radio" name="radio" > <br><br>
<!--같은 form안에 있는 여러개를 선택할 수 있다.-->
짬뽕. <input type="checkbox" name="checkbox" > <br>
짜장. <input type="checkbox" name="checkbox" checked> <br>
만두. <input type="checkbox" name="checkbox" checked> <br><br>
<!--파일선택-->
파일선택 : <input type="file" name="file" value="파일"> <br><br>
<!--사용자가 안보이는 숨겨진 입력필드(변경해서는 안 되는 데이터를 제출시 사용)-->
비밀 : <input type="hidden" name="hidden" value="숨겨진"> <br><br>
<!--날짜를 선택할 수 있는 달력-->
날짜 : <input type="date" name="date" value="2000-01-01"> <br><br>
<!--날짜, 시간을 선택할 수 있는 달력(YYYY-MM-DDTHH:mm:ss)-->
날짜 시간 : <input type="datetime-local" name="date2" value="2000-05-05T23:10:22"> <br><br>
<!--년도, 달을 선택할 수 있는 달력-->
년, 월 : <input type="month" name="month" value="2008-11"> <br><br>
<!--년도, 주를 선택할 수 있는 달력-->
년, 주차 : <input type="week" name="week" value="2107-W51"> <br><br>
<!--시간을 선택할 수 있는 달력-->
시간 : <input type="time" name="time" value="23:10"> <br><br>
<!--슬라이드바를 조정하여 범위 내의 숫자를 선택할 수 있는 입력 필드-->
값 설정 : <input type="range" name="range" min=50 max=550 value="200"> <br><br>
<!--색을 선택할 수 있는 입력 필드-->
색 선택 : <input type="color" name="color" value="#3ef5f2"> <br><br>
<!--버튼을 만든다. type 속성값은
button - 단순한 버튼
submit - 속성값을 서버에 전송할 목적
reset - 폼을 초기화-->
<!--button 태그는 input태그와 달리 종료태그가 있어 하위태그를 추가할 수 있다.
자유도가 높아 아래 input 버튼들은 무시한다.-->
버튼 : <button type="button">버튼</button><br>
리셋 : <button type="reset">리셋</button> <br>
전송 : <button type="submit">전송</button> <br>
-------------------------------------------------------<br>
<!--클릭하여 동작하는 버튼. onclick 속성에 javascript 코드를 삽입-->
버튼 : <input type="button" onclick="나중에배울것" name="button" value="버튼"> <br><br>
<!--같은 form안에 있는 input기입란이 value값으로 초기화-->
리셋 : <input type="reset" name="reset" value="리셋"> <br><br>
<!--같은 form안에 있는 input정보들이 action에 기입된곳으로 전송 버튼-->
전송 : <input type="submit" name="submit" value="전송"> <br><br>
<!--이미지 형태의 버튼을 생성-->
이미지 버튼 : <input type="image" src="https://blog.kakaocdn.net/dna/bDC2Fs/btr2zmzNOqr/AAAAAAAAAAAAAAAAAAAAAKaiCgJdgLnnie0rQM9MoVQ2nySjaTknbi2bl3-Kl4kv/sleep.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1756652399&allow_ip=&allow_referer=&signature=OyrtVN0jUMv3Yfr1NquvxbnvALo%3D&attach=1&knm=img.png" alt="이미지"> <br><br>
</form>
</body>
</html>
|
'HTML' 카테고리의 다른 글
| <textarea>, <select>, <option>, <optgroup> (0) | 2023.03.08 |
|---|---|
| <label>, <fieldset>, <legend> (0) | 2023.03.06 |
| <a>, <img> (0) | 2023.03.06 |
| <ul>, <ol>, <dl> (0) | 2023.03.05 |
| <div>, <span> (0) | 2023.03.05 |