DropDown List
사용자들에게 선택지 중 하나를 고르게 하는 방법이 있다. 그중 하나가 Dropdown List
제한된 공간 안에서 여러개의 선택지를 선택할 수 있도록 하는 기능이다. 콤보박스라고 생각하면된다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<html>
<head>
<meta charset="utf-8">
<body>
<h1> 색상</h1>
<select>
<option>붉은색</option>
<option>검은색</option>
<option>파란색</option>
</select>
</body>
</head>
</html>
|
cs |
<select> 태그와 <option> 태그를 이용한다.
색상을 검은색으로 선택하고 제출버튼을 누르는 코드를 만들어봤다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<html>
<head>
<meta charset="utf-8">
<body>
<form action="http://localhost/color.php">
<h1> 색상</h1>
<select name="color">
<option>붉은색</option>
<option>검은색</option>
<option>파란색</option>
</select>
<input type="submit">
</form>
</body>
</head>
</html>
|
cs |
value
"검은색"은 사람이 알기 쉬운 정보이지만, 컴퓨터가 알기 쉬운 정보는 아니다. 그렇기에 컴퓨터가
알기 쉬운 정보로 바꿔줄 때 value가 사용된다.
다중선택
색깔을 여러개 선택하고 싶을 때는 <select> 태그에 속성으로 multiple을 추가해주면된다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<html>
<head>
<meta charset="utf-8">
<body>
<form action="http://localhost/color.php">
<h1> 색상</h1>
<select name="color">
<option value="red">붉은색</option>
<option value="black">검은색</option>
<option value="blue">파란색</option>
</select>
<h1>색상2(다중선택)</h1>
<select name="color2" multiple>
<option value="red">붉은색</option>
<option value="black">검은색</option>
<option value="blue">파란색</option>
<option value="yellow">노란색</option>
</select>
<input type="submit">
</form>
</body>
</head>
</html>
|
cs |
ctrl키를 누른 상태에서 여러개 선택해주면된다.
색상2에서 4개의 색깔을 다 선택해준 모습.
radio
같은 name으로 지정되어있으면 하나의 버튼만 선택 가능 (복수선택 불가능)
체크박스
radio와 다르게 같은 name이여도 복수선택 가능하다
radio와 체크 박스 코드
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<html>
<head>
<meta charset="utf-8">
<body>
<p>
<h1>색상(단일선택)</h1>
붉은색 : <input type="radio" name="color" value="red">
검은색 : <input type="radio" name="color" value="black">
파란색 : <input type="radio" name="color" value="blue">
</p>
<p>
<h1>사이즈(다중선택)</h1>
95 : <input type="checkbox" name="size">
100 : <input type="checkbox" name="size">
105 : <input type="checkbox" name="size">
</p>
</body>
</head>
</html>
|
cs |
checked
기본적으로 선택됐으면 하는 항목에 checked라는 속성을 넣어주면 얘는 처음부터 check되어 나온다.
그럼 정보가 어떻게 서버에 가는지 확인해보자.
색상은 red, 사이즈는 100,105를 체크했을 때
최종코드
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<html>
<head>
<meta charset="utf-8">
<body>
<form action="http://localhost/order.php">
<p>
<h1>색상(단일선택)</h1>
붉은색 : <input type="radio" name="color" value="red">
검은색 : <input type="radio" name="color" value="black">
파란색 : <input type="radio" name="color" value="blue">
</p>
<p>
<h1>사이즈(다중선택)</h1>
95 : <input type="checkbox" name="size" value="95">
100 : <input type="checkbox" name="size" value="100">
105 : <input type="checkbox" name="size" value="105">
</p>
<input type="submit">
</form>
</body>
</head>
</html>
|
cs |
버튼
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<html>
<head><meta charset="utf-8">
<body>
<form action="http://localhost/form.php">
<input type="text">
<input type="submit" value="전송">
<input type="button" value="버튼" onclick="alert('hello world')">
<input type="reset">
</form>
</body>
</head>
</html>
|
cs |
전송은 페이지가 바뀌지만, 버튼은 아무 일도 일어나지 않는다.
버튼은 UI만 만들어줌 -> 자바 스크립트를 사용할 때 활용도가 생긴다.
<input type="button" value="버튼" onclick="alert('hello world')">
--> onclick 속성 있는 곳이 자바 스크립트 부분
버튼 누르면 경고창 비슷한게 뜬다.
reset
전송을 누르면 사용자가 입력한 정보가 서버로 들어간다. (위 코드의 경우 내 pc에 설치된 웹서버인 localhost로 들어감)
하지만 재설정을 누르면 모든 정보가 초기화된다.
hidden
말 그대로 숨겨져 있는거라 hidden이라는 UI가 없다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<html>
<head>
<meta charset="utf-8">
<body>
<form action="http://localhost/hidden.php">
<input type="text" name="id">
<input type="hidden" name="hide" value="meaning">
<input type="submit" value="submit" >
</form>
</body>
</head>
</html>
|
cs |
submit 버튼을 눌렀을 때 hide=meaning 이라고 뜬다!
즉, UI가 없지만 서버로 어떤 값을 넘기고 싶을 때 hidden을 쓴다.
name과 value이 차이
그렇다면 name과 value의 차이가 궁금했는데, 내가 직관적으로 이해한 부분은 (틀리면 댓글로 알려주세요..! 감사합니다!=))
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<html>
<head>
<meta charset="utf-8">
<body>
<form action="http://localhost/hidden.php">
<input type="text" name="id" value="text" >
<input type="hidden" name="hide" value="meaning">
<input type="submit" value="제출" name="deliver" >
</form>
</body>
</head>
</html>
|
cs |
input type="text"의 name은 id, value는 text
input type="submit"의 name은 deliver, value는 제출이다.
제출 버튼을 눌러서 서버로 정보를 전달하면
name=value형태가 뜬다.
즉, name은 서버로 넘어갈 때 변수 역할을 하고, value는 변수(=name)에 들어있는 정보이다.
진짜 뜻 그대로 이름(=변수의 이름), 속성(=변수 안의 정보/속성)이다!
이걸 더 자세히 설명한 자료들도 찾아봤다.
exact difference between "name" and "value" attribute in input tag
I know that it might be so easy but I cant understand the exact difference between name and value attributes in an input tag (html). what do they do?!
stackoverflow.com
'HTML > 생활코딩' 카테고리의 다른 글
| [HTML기초] 정보로서 HTML - 글꼴/meta/의미론적 태그/검색엔진 최적화 (0) | 2021.11.13 |
|---|---|
| [HTML 기초] 입력양식 -form(3) label/method/post (0) | 2021.11.12 |
| [HTML기초] 입력양식 - form (0) | 2021.11.05 |
| [HTML 기초] table (0) | 2021.11.03 |
| [HTML기초] p태그,br태그,img태그 (0) | 2021.10.22 |
댓글