-
입력관련 태그Frontend/HTML 2024. 6. 5. 21:46
입력 관련 태그 form 태그 / input 태그
form 태그
- 입력 양식을 작성하는 영역(공간) - 내부에 작성된 입력 값을 지정된 공간으로 제출하는 역할 속성 1. action : 제출된 공간을 지정하는 속성(주소를 작성) 2. method : 설정된 공간으로 데이터를 전달하는 방식 3. name : 자바 스크립트에서 사용, form 의 이름을 지정하는 속성 4. target : 제출된 페이지를 현재 또는 새 탭으로 열기 설정input 태그
- 웹 문서에사 사용자가 입력할 수 있는 양식을 제공해주는 태그 - 많은 type 이 존재하고, input 의 변형 형태도 다양하게 존재 - name 속성이 99% 이상 필수로 작성되어야 함 (작성해줘야 추후 개발할때 용의) name"변수명" 추후 개발에서 필요한 변수명을 작성해주는 후 기능연결 type 속성을 환경에 맞게 설정 type 종류 text : 한 줄 텍스트 입력 상자(기본값) passworod : 비밀번호 입력 상자(모자이크 처리) url : 주소 설정 search : 검색 기능 tel : telephone 전화번호 email : 모양은 텍스트와 동일하지만 이메일 작성 용도(@, . 사용했는지 확인) number : 숫자만 입력 가능한 상자 range : 슬라이드바를 이용해서 숫자 지정 (단독사용X, 보통 js 같이 사용) - min(최소값), max(최대값), step(숫자가 증가/감소하는 단계), value(기본값 설정) date/month/week/time/datetime-local : 날짜 관련 태그 input 태그의 경우 한 태그 안에서 열고 닫지만 예외 상황이 생길 경우 으로 사용하기도 함 input 은 무조건 form 태그 안에다가 작성해야하는 것은 아님 단독으로 사용할 수도 있음 추후 id 라는 속성을 이용할 것 id : 자바스크립트에서 사용할 변수명 label 과 연결해주는 기능 name : form 으로 내용을 제출할 때 사용 name 안에 변수명을 작성할 때는 속성이나 예약어는 피해서 작성할 것 name : id 작성하면 id 속성과 혼동이 올 수 있음 placeholder : 사용자가 입력을 해야하는 내용이나 정보를 미리보기처럼 양식을 작성해주는 공간 required : 폼을 제출할 때 필수로 작성해야하는 것을 의미 이메일의 경우 @ . 를 작성하지 않으면 작성해야한다는 요청 메세지가 보임라벨 태그
label 태그는 input 태그의 앞 뒤에 위치하며 input 에 관련된 설명을 제공하는데 사용 label 에서 name 과 같은 for 속성의 이름을 사용 input 과 label 태그를 연결해줄 때 id 와 for 속성을 사용해서 연결radio checkbox
- 여러 연관된 값을 묶어서 선택하는 경우 사용 - radio : 여러 값중 하나만 선택 Ex) 성별 - checkbox : 여러 값 중 원하는 모든 것 선택 Ex) 상세검색, 관심분야, 취미 연관된 radio 와 checkbox 는 같은 name 속성 값을 가져야 함 radio, checkbox 추가 속성 - value : 선택 되었을 때 제출될 값을 작성하는 속성 - checked : 체크가 되어있게 하는 속성
날짜 / 시간 관련 input 태그
radio 확인
강아지
고양이
사자
checkbox 확인
내가 좋아하는 색상 고르기
빨강
노랑
초록
radio checkbox 에 value 와 checked 를 넣어보기
A팀 B팀
수영
독서
잠자기버튼 태그
- 버튼을 만드는 태그는 - type 속성 값에 따라 동작이 잘라짐 type="submit" type 에서 submit 을 작성하게 되면 form 을 제출하는 버튼을 만들 때 제출하겠다는 의미 button 에서 type 을 지정해주지 않으면 기본으로 submit 지정 type="reset" 작성된 모든 값을 초기화 type="button" 버튼 동작을 개발자가 만들고자 할 때 사용textarea
여러 줄을 입력할 수 있는 입력 상자 속성 - name : 제출되는 곳에서 데이터를 읽을 때 필요한 이름 - rows : textarea 행 크기를 지정(rows="3" 3행) - cols : textarea 열 크기를 지정(cols="10" 10열) - style="resize:none" : 크기 변경 불가<!DOCTYPE html> <html lang="ko"> <head> <title>입력 관련 태그</title> <meta charset="UTF-8"> </head> <body> <h1>form 태그 / input 태그</h1> <h3>form 태그</h3> <pre> - 입력 양식을 작성하는 영역(공간) - 내부에 작성된 입력 값을 지정된 공간으로 제출하는 역할 속성 1. action : 제출된 공간을 지정하는 속성(주소를 작성) 2. method : 설정된 공간으로 데이터를 전달하는 방식 3. name : 자바 스크립트에서 사용, form 의 이름을 지정하는 속성 4. target : 제출된 페이지를 현재 또는 새 탭으로 열기 설정 </pre> <h3>input 태그</h3> <pre> - 웹 문서에사 사용자가 입력할 수 있는 양식을 제공해주는 태그 - 많은 type 이 존재하고, input 의 변형 형태도 다양하게 존재 - name 속성이 99% 이상 필수로 작성되어야 함 (작성해줘야 추후 개발할때 용의) name"변수명" 추후 개발에서 필요한 변수명을 작성해주는 후 기능연결 type 속성을 환경에 맞게 설정 type 종류 text : 한 줄 텍스트 입력 상자(기본값) passworod : 비밀번호 입력 상자(모자이크 처리) url : 주소 설정 search : 검색 기능 tel : telephone 전화번호 email : 모양은 텍스트와 동일하지만 이메일 작성 용도(@, . 사용했는지 확인) number : 숫자만 입력 가능한 상자 range : 슬라이드바를 이용해서 숫자 지정 (단독사용X, 보통 js 같이 사용) - min(최소값), max(최대값), step(숫자가 증가/감소하는 단계), value(기본값 설정) date/month/week/time/datetime-local : 날짜 관련 태그 input 태그의 경우 한 태그 안에서 열고 닫지만 예외 상황이 생길 경우 <input></input> 으로 사용하기도 함 input 은 무조건 form 태그 안에다가 작성해야하는 것은 아님 단독으로 사용할 수도 있음 추후 id 라는 속성을 이용할 것 id : 자바스크립트에서 사용할 변수명 label 과 연결해주는 기능 name : form 으로 내용을 제출할 때 사용 name 안에 변수명을 작성할 때는 속성이나 예약어는 피해서 작성할 것 name : id 작성하면 id 속성과 혼동이 올 수 있음 placeholder : 사용자가 입력을 해야하는 내용이나 정보를 미리보기처럼 양식을 작성해주는 공간 required : 폼을 제출할 때 필수로 작성해야하는 것을 의미 이메일의 경우 @ . 를 작성하지 않으면 작성해야한다는 요청 메세지가 보임 </pre> <h3>라벨 태그</h3> <pre> label 태그는 input 태그의 앞 뒤에 위치하며 input 에 관련된 설명을 제공하는데 사용 label 에서 name 과 같은 for 속성의 이름을 사용 input 과 label 태그를 연결해줄 때 id 와 for 속성을 사용해서 연결 </pre> <h3>radio checkbox</h3> <pre> - 여러 연관된 값을 묶어서 선택하는 경우 사용 - radio : 여러 값중 하나만 선택 Ex) 성별 - checkbox : 여러 값 중 원하는 모든 것 선택 Ex) 상세검색, 관심분야, 취미 <strong style="color: red;"> 연관된 radio 와 checkbox 는 같은 name 속성 값을 가져야 함 </strong> radio, checkbox 추가 속성 - value : 선택 되었을 때 제출될 값을 작성하는 속성 - checked : 체크가 되어있게 하는 속성 </pre> <hr> <!-- 자동정렬 alt shift f--> <form> 아이디 : <input type="text" name="user_id"> <br> 비밀번호 : <input type="password" name="pw"> <br> 이메일 : <input type="email" name="email"> <br> 숫자 : <input type="number" name="num"> <br> <input type="range" min="10" max="100" step="1" value="30" name="ran"> <br> </form> <h4>날짜 / 시간 관련 input 태그</h4> <ul> <li> <input type="date"> </li> <li> <input type="month"> </li> <li> <input type="week"> </li> <li> <input type="time"> </li> <li> <input type="datetime-local"> </li> </ul> <h4>radio 확인</h4> <input type="radio" name="동물"> 강아지 <br> <input type="radio" name="동물"> 고양이 <br> <input type="radio" name="동물"> 사자 <hr> <h4>checkbox 확인</h4> <p>내가 좋아하는 색상 고르기</p> <input type="checkbox" name="색상"> 빨강 <br> <input type="checkbox" name="색상"> 노랑 <br> <input type="checkbox" name="색상"> 초록 <br> <h4>radio checkbox 에 value 와 checked 를 넣어보기</h4> <input type="radio" name="팀" value="A팀 선택했음" checked>A팀 <input type="radio" name="팀" value="B팀 선택했음">B팀 <hr> <input type="checkbox" name="취미" value="수영" checked> 수영 <br> <input type="checkbox" name="취미" value="독서" checked> 독서 <br> <input type="checkbox" name="취미" value="잠자기" checked> 잠자기 <h3>버튼 태그</h3> <pre> - 버튼을 만드는 태그는 - type 속성 값에 따라 동작이 잘라짐 type="submit" type 에서 submit 을 작성하게 되면 form 을 제출하는 버튼을 만들 때 제출하겠다는 의미 button 에서 type 을 지정해주지 않으면 기본으로 submit 지정 type="reset" 작성된 모든 값을 초기화 type="button" 버튼 동작을 개발자가 만들고자 할 때 사용 </pre> <h3>textarea</h3> <pre> 여러 줄을 입력할 수 있는 입력 상자 속성 - name : 제출되는 곳에서 데이터를 읽을 때 필요한 이름 - rows : textarea 행 크기를 지정(rows="3" 3행) - cols : textarea 열 크기를 지정(cols="10" 10열) - style="resize:none" : 크기 변경 불가 </pre> <textarea name="데이터에 필요한 이름" cols="20" rows="10"> 이름: 나이: 주소: </textarea> </body> </html>