지금까지 출력태그 (코드에 쓰여진 대로 보여주는 것) 에 대해서 알아보았다면 이번에는 입력태그에 대해서 배워볼게요.
입력 태그는 렌더링 이후의 결과물에다가 내용을 새롭게 기입할 수 있는 태그 입니다.
입력태그
input 태그
사용자로부터 값을 입력받을수 있는 대화형 컨트롤(또는 ‘필드’)를 나타냅니다.
기본적으로 인라인 요소이며, 단일 태그입니다.
<body>
<input />
</body>
input은 속성 값에 변화를 주어서 각각의 다른 형태와 속성으로 바꿀 수 있습니다.
즉, input의 핵심은 type 속성이에요. type의 값에 따라 입력 요소의 형태나 입력 데이터 유형 등이 달라집니다.
사용 가능한 type은 20여 가지이며, 기본 타입의 값은 text (문자를 입력하는 네모 박스) 입니다.
그럼 가장 기본적인 text 로 사용할 수 있는 각각의 속성들을 확인해볼게요.
placeholder
<input type="text" placeholder="아이디" / ><br>
placeholder 를 쓰면 입력내용의 안 쪽에 무엇을 쓸지 적어둡니다. 내용을 쓰면 사라집니다.
password
<input type="password" placeholder="비밀번호" / ><br>
입력창 안쪽이 *로 모자이크 처리가 됩니다.
color
<input type="color" / ><br>
색을 선택하면 해당 색이 적용이 됩니다.
button
<input type="button" value="PUSH"/ ><br>
마우스로 클릭할 수 있는 버튼이 생성됩니다. 속성으로 value를 설정하면 클릭하는 창 안의 내용을 기재할 수 있습니다.
value 는 모든 입력 요소에 대해 '입력 요소에 쓰여져 있는 기본값'을 뜻하는 속성 역할을 합니다.
버튼만이 유일하게 입력 값보다는 버튼에 쓰여져 있는 글자에 해당합니다.
<input type="text" placeholder="이름" value="이름의 입력 값을 뜻함"/ ><br>
<input type="color" value="#FF0000"/ ><br>이렇게 각 input 코드의 안에 value 값을 입력하면 입력의 디폴트 기본 값을 표시하게 됩니다.
radio
input은 사용자로부터 입력을 받는데, 이것은 키보드 뿐만 아니라 마우스 또한 입력으로 받아들여집니다.
라디오 버튼은 같은 문제에서 하나만 선택할 수 있는 체크란을 형성합니다.
<h3> 보기 중에 선택하세요. </h3>
<input type="radio"> 1
<input type="radio"> 2
<input type="radio"> 3
<input type="radio"> 4
checkbox
체크박스는 같은 문제에서 중복하여 선택할 수 있는 체크란을 형성합니다.
<h3> 보기 중에 또 선택하세요. </h3>
<input type="checkbox"> 1
<input type="checkbox"> 2
<input type="checkbox"> 3
<input type="checkbox"> 4
<!DOCTYPE html>
<html lang="en">
<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>입력창을 띄워보겠어요</title>
</head>
<body>
<input type="text" placeholder="아이디" / ><br> <!-- placeholder 를 쓰면 입력내용의 안 쪽에 무엇을 쓸지 적어둡니다. 내용을 쓰면 사라집니다. -->
<input type="password" placeholder="비밀번호" / ><br> <!-- 입력창 안쪽이 *로 모자이크 처리가 됩니다.-->
<input type="color" / ><br> <!-- 색을 선택하면 해당 색이 적용이 됩니다. -->
<input type="button" value="PUSH"/ ><br> <!-- 마우스로 클릭할 수 있는 버튼이 생성됩니다. 속성으로 value를 설정하면 클릭하는 창 안의 내용을 기재할 수 있습니다.-->
<!-- value 는 모든 입력 요소에 대해 '입력 요소에 쓰여져 있는 기본값'을 뜻하는 속성 역할을 합니다.
버튼만이 유일하게 입력 값보다는 버튼에 쓰여져 있는 글자에 해당합니다.
-->
<input type="text" placeholder="이름" value="이름의 입력 값을 뜻함"/ ><br>
<input type="color" value="#FF0000"/ ><br>
<h3> 보기 중에 선택하세요. </h3>
<input type="radio"> 1
<input type="radio"> 2
<input type="radio"> 3
<input type="radio"> 4
<h3> 보기 중에 또 선택하세요. </h3>
<input type="checkbox"> 1
<input type="checkbox"> 2
<input type="checkbox"> 3
<input type="checkbox"> 4
</body>
</html>
상기 코드의 결과 화면은 아래와 같습니다.
name 식별자
imput 태그에는 name 식별자를 추가할 수 있습니다.
유형이 똑같은 input 을 사용할 수 있으므로 name 으로 서로를 구분합니다.
<input type="button" value="PUSH" name ="call"/ ><br>
<input type="button" value="PUSH" name ="message"/ ><br>
같은 버튼이지만 다른 name 을 붙여 두 개를 구분합니다.
name이 반드시 같아야만 하는 항목들도 있습니다.
바로 라디오와 체크박스인데요.
라디오와 체크박스는 name에 같은 식별자로 묶여야 하나의 개체로 묶입니다.
라디오와 체크박스에서 하나 보완해줄 사항이 있습니다.
둘 다 체크박스에 마우스로 클릭을 함으로써 체크된 데이터를 제출할 수 있는데요.
체크박스가 아닌 항목의 이름을 클릭해도 체크가 될 수 있도록 하는 방법으로
label 을 감싸주는 방법이 있습니다.
<input> 사이를 <label> </label> 을 감싸줌으로써 입력 요소의 제목 역할을 하게 되는 거예요.
라벨은 다른 input 에서도 사용이 가능합니다.
<!-- input을 보완해주는 또 다른 태그! 버튼을 눌러야만 동작을 하는 것이 아쉬움.
input을 위한 텍스트를 추가할 수 있습니다. -->
<p> 지금 당장 먹고 싶은 음식은? </p>
<br>
<label><input type="radio" name="goal"> 딸기치즈 케이크</label>
<label><input type="radio" name="goal"> 야채 샤브샤브 </label>
<label><input type="radio" name="goal"> 가지 스테이크 </label>
<label><input type="radio" name="goal"> 과일 화채</label>
<!-- label은 입력 요소의 제목 역할을 합니다.
이렇게 라벨로 둘러 놓으면 글자를 눌렀을 때 선택이 가능합니다.-->
이렇게 라벨을 둘러놓으면 체크박스를 좀 더 편이하게 사용할 수 있겠죠.
아래는 실행 결과 입니다.
select
select 는 드롭다운 메뉴를 생성합니다. 즉 select 는 다수의 옵션(선택지)를 포함할 수 있는 선택 메뉴입니다.
메뉴 안에 포함되는 옵션은 option 태그를 사용해 표시합니다.
<h2>자주 가는 카페</h2>
<select name="cafe" >
<option value="스타벅스"> 스타벅스 </option>
<option value="커피 천국"> 커피 천국 </option>
<option vlaue="테라로사" > 테라로사 </option>
</select>
select의 보기 중에 선택했을 때
선택 값에 대한 value = " " 는 실제로 선택 되어져서 웹브라우저에서 처리되는 결과 값입니다. (실제 처리되는 값)
그 옆에 적혀있는 문자열은 그 선택지에 대한 간판 역할을 합니다.
select에는 input과 마찬가지로 name을 지정할 수 있으며, 각각의 option에는 value 속성을 지정할 수 있습니다.
textarea
textarea는 텍스트 입력란을 생성하는데 사용됩니다.
자유롭게 크기를 조절할 수 있는 입력란을 만들어서, 이용자들이 장문의 글을 작성할 수 있도록 합니다.
텍스트 에어리어 사이에 글자를 쓰면 value의 값이 기재되어 있습니다.
<h2> 의견을 자유롭게 적어주세요. </h2>
<textarea name = "opinion"> 이곳은 value 값이 있는 자리입니다. </textarea>
여기까지 다양한 input 과 그 type 에 대해서 알아 보았습니다.
이 다음에는 이렇게 작성하고 입력한 데이터를 전송하는 form 에 대해서 알아볼게요!
'HTML · CSS > HTML · CSS 입문 공부일지' 카테고리의 다른 글
| 웹 HTML 입문 공부 10. 뷰포트viewport, 시맨틱 태그, 미디어 태그 (0) | 2022.11.10 |
|---|---|
| 웹 HTML 입문 공부 9. form 데이터 전송, fieldset (0) | 2022.11.09 |
| 웹 HTML 입문 공부 7. 목록list 생성하기 (0) | 2022.11.09 |
| 웹 HTML 입문 공부 6. 하이퍼링크 표시 (0) | 2022.11.09 |
| 웹 HTML 입문 공부 5. 컨테이너 요소, 전역 속성 (+ 검색 엔진에 노출 잘 되는 법) (0) | 2022.11.09 |