1. HTML 입력 폼 태그
https://tadaktadak-it.tistory.com/64?category=1020641
<form>
<input type="text" name="" id ="" placeholder="text 타입 입력">
<button type="button" name="" id ="">BUTTON</button>
<select>
<option>네이버</option>
<option>다음</option>
</select>
<textarea rows="10" cols="50"></textarea>
<div>
<label for="txt">아이디</label>
<input type="text" name="" id="txt">
</div>
</form>
<form> | 웹에서 사용자 정보를 입력 받기 위한 큰 틀을 제공 |
<input> | 웹에서 텍스트 입력에 대한 가장 기본이 되는 태그 |
<label> | 일반적으로 <input> 태그와 같이 사용되며 <input> 폼 위/앞의 라벨 태그로 사용 |
<textarea> | 여러줄의 텍스트를 입력 받을 경우 사용되는 태그 |
<button> | 버튼 형식의 입력 태그 |
<select> | 여러개의 항목 중 하나를 선택하는 콤보박스 형식 입력 태그 |
<option> | <select> 아래에 항목들에 대한 태그 |
2. form 태그 속성
<form
action="https://daum.net/search.jsp"
method="get"
name="person_info"
accept-charset="utf-8"
>
<input></input>
<select></select>
.....
</form>
action | 폼을 전송할 서버(백엔드) 쪽 스크립트 파일 지정 |
target | action에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정 |
method | 폼을 서버에 전송할 http 메소드를 지정(get or post) |
accept-charset | 폼 전송에 사용할 문자 인코딩을 지정 |
name | 폼을 식별하기 위한 이름을 지정 |
3. input 태그 타입 및 속성
* 타입
* 속성
4. 폼 태그 예시
<body>
<form>
<input type="text" name="login_id" placeholder="여기에 로그인 ID를 입력하세요"/>
<input type="password" placeholder="패스워드 입력"/>
<input type="checkbox" placeholder="checkbox 타입"/>
<input type="radio" placeholder="radio 타입"/>
<input type="image" src="./daum.png" width="200px" placeholder="image 타입"/>
<input type="file" placeholder="file 타입">
<input type="hidden" placeholder="hidden 타입">
</form>
<form>
<button type="button">BUTTON</button>
<button type="submit">SUBMIT</button>
<button type="reset">RESET</button>
</form>
<form>
<select>
<option>네이버</option>
<option>다음</option>
</select>
</form>
<form>
<textarea rows="5" cols="100" placeholder="여기에 텍스트를 입력하세요"></textarea>
</form>
<form>
<div>
<label>아이디</label>
<input type="text" name="아이디"/>
</div>
<div>
<input type="checkbox"/>
<label>등록확인하세요</label>
</div>
<div>
<input type="radio" name="fruit"/>
<label>바나나</label>
<input type="radio" name="fruit"/>
<label>사과</label>
<input type="radio" name="fruit"/>
<label>파인애플</label>
</div>
</form>
</body>
5. 이미지 태그
<img src="이미지 파일 경로" alt="대체용 텍스트(웹접근성)">
* <img> 웹 문서에 이미지를 삽입할때 사용한다.
* 속성
src | 표시하고자 하는 이미지의 경로를 지정, 파일 경로, 주소로도 가능 |
alt | 웹 접근성(스크린 리더)을 위해 이미지 설명을 넣음 |
width | 이미지 넓이(넓이만 설정하면 높이는 비율로 조정) |
heigh | 이미지 높이(높이만 설정하면 높이는 비율로 조정) |
* 지원하는 이미지
jpg | 사진을 표현하는 손실 압축 방식의 16만 색상 지원 이미지 |
gif | 일반적으로 아이콘을 표시하며 비손실 압축으로 최대 256 색상 지원 |
png | 비손실 압축 방식 투명 레이어를 지원하는 이미지 |
* 상대 경로
- 현재 위치한 페이지(파일) 기준으로 찾아가는 경로
./ : 현재 폴더(ex : "./beer.png" == "beer1.png")
../ : 상위 폴더로
* 절대 경로
- 어떤 페이지에 있던 간에 최상위 경로부터 하나씩 써 놓아서 찾아갈 수 있게 작성한 경로
- 절대 경로에 드라이브 경로는 작성할 수 없음
- 이미지의 주소를 사용하여 이미지를 넣을 수 있음
6. 이미지 태그 예시
<body>
<img src="daum.png" alt="다음 로고">
<img src="" width="100px" alt="다음 로고">
<img src="daum.png" height="100px" alt="다음 로고">
<img src="daum.png" width="100px" height="100px" alt="다음 로고">
<img src="https://t1.daumcdn.net/b2/creative/54229/3368ee88e60ee5439e7910822a3ef92b.jpg">
</body>
'FrontEnd > HTML' 카테고리의 다른 글
[HTML] HTML 오디오, 비디오, 멀티미디어 대체 태그 (0) | 2022.09.15 |
---|---|
[HTML] HTML 리스트, 테이블 태그 (0) | 2022.09.15 |
[HTML] HTML 시맨틱, 레이아웃, 텍스트 태그 (0) | 2022.09.15 |
[HTML] HTML의 개요, 구성요소, 문서구조 (0) | 2022.09.14 |