HTML문서의 기본구조
태그란?
태그는 HTML에서 가장 중요한 문법이다. markup이라는 특징과도 맞닿아있는 것이 태그이다.
파일 올리는 법
<a>태그에서 href에 링크가 아닌 파일경로를 입력해주면 된다.
Form 만들기
<input type="text">라고 적어주면 입력이 가능해지는 박스가 만들어지며, text를 을 수 있도록 속성이 설정된것이다.
type에 "password"를 넣어주면 비밀번호를 입력할때처럼 땡땡땡...으로나온다.
입력한 내용을 제출할 때 누르는 버튼을 만들려면 type="submit"으로 속성을 부여하면 된다.
이렇게 아이디, 비밀번호, 제출버튼 등을 <form>태그로 감싸면 하나의 폼으로 관리가 되는 것이다.
입력한 정보가 어디로 제출될 지는 form 태그에 action이라는 속성으로 action="제출 주소" 이렇게 적어주어야 한다.
이렇게 정보를 서버에 전달할 때, 이 정보가 대체 무엇인지 파악할 수 없을 수 있다. 다 같은 문자열이니까.!
그래서 input태그에 속성으로 name="정보분류" 를 입력해주어야 한다.
value라는 속성에 문자열을 할당하면 사용자가 입력란을 채우기 전에 미리 입력되어있을 내용을 지정할 수 있다.
여러 줄을 입력받고싶은 경우에는 <textarea></textarea> 태그를 사용해야 한다. 속성으로 cols='숫자' rows='숫자'로 텍스트 입력란의 크기를 조절할 수 있으며, 두 태그 사이에 내용을 입력해놓으면 input태그의 value속성같은 효과를 낼 수 있다.
Dropdown List 만들기
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html>
<html>
<head>
<title>memo</title>
</head>
<body>
<form action='제출할 서버'>
<h1>color</h1>
<select name="color">
<option value='1'>red</option>
<option value='2'>black</option>
<option value='3'>blue</option>
</select>
<input type="submit">
</form>
</body>
</html>
|
cs |
form 태그로 감싸고, select태그를 연 다음 그 안에 option태그들로 선택할 수 있는 항목들을 적어주면 Dropdown List를 만들 수 있다. 이때 option에 value라는 속성을 설정해 주면 해당 선택지를 서버에 전송할 때 전송할 정보를 지정해줄 수 있다.
radio 버튼
라디오 버튼은 여러 항목 중 하나만 선택할 수 있도록 해주는 버튼이다.
<input type="radio"> 이렇게 적으면 올챙이알같은 라디오버튼이 생긴다. 이렇게 여러개의 라디오 버튼을 만들면 여러개의 라디오버튼을 동시에 선택하는 것 또한 가능한 것을 관찰할 수 있다.
하지만 속성으로 name을 지정해주면 같은 name을 가진 라디오버튼들은 동시에 하나만 선택 가능하다. value속성을 지정해주면 서버로 전달할 정보를 지정해줄 수 있다.
checkbox
체크박스는 라디오버튼과 달리 여러개의 항목을 선택할 수 있도록 해주는 input type이다. 라디오버튼과 사용법은 동일하다.
기본으로 체크되어있었으면 좋겠다 싶은 체크박스가 있다면 input의 속성으로 checked를 입력해주면 된다. 속성값이 없는 속성이다.
'📁Web Developing > HTML 기초' 카테고리의 다른 글
| 표 태그 (0) | 2022.05.28 |
|---|---|
| 리스트와 설명 목록 태그 (0) | 2022.05.28 |
| 텍스트 컨텐츠를 다루는 태그들 (0) | 2022.05.28 |
| 글자의 형태를 다루는 태그들 (0) | 2022.05.28 |
| head와 body에 들어가는 태그 (0) | 2022.05.28 |
댓글