[HTML] TIL4 : 기본 태그의 종류와 속성(3/3)

728x90

▣ 실행결과

<body> 태그 내에서 사용되는 기본적인 태그들과 그 속성에 대하여 다루는 마지막 내용입니다. 위의 사진은 이번 내용을 직접 작성하여 실행한 결과입니다.

□ 입력 양식(Input Forms)

▷ 폼 태그

<!-- Form Input -->
<form action="process.php" method="get">

</form>

<form> 태그는 사용자 입력을 받아 백엔드(Backend)로 데이터를 보내어 처리할 수 있게 해주는 HTML 요소입니다. action 속성의 값은 데이터가 보내어지는 경로를 의미하고, method 속성의 값은 지정된 경로에서 이루어지는 행위를 의미합니다. 즉, 사용자가 입력한 데이터는 서버(Server)의 "process.php"로 보내어지고, 서버는 그 데이터를 읽어 들여(GET; Read) 특정 비즈니스 로직(Business logic)이 이루지는 것으로 파악할 수 있습니다.

▷ 레이블 태그

<!-- Labeling -->
<label for="name">Name</label>

<!-- Enhance Clickable Area Size -->
<label><input type="radio" value="1">1</label>
<label><input type="checkbox" value="2">2</label>

<label> 태그는 말 그대로 데이터 입력 양식의 꼬리표 역할을 하며, 특히 안에 <input> 태그를 포함하여 작성함으로써 브라우저에서 사용자가 선택할 수 있는 영역이 작아서 클릭하기 어려운 경우에 클릭 가능한 영역을 확장할 수 있습니다. for 속성은 <form> 태그 내에서 해당 <label> 태그의 ID같은 역할을 하며 반드시 <label> 태그의 내용과 직접적인 연관이 있어야 합니다.

▷ 입력 태그 : 한줄 텍스트, 이메일, 숫자, 날짜

<!-- Text Input -->
<div>
  <label for="name">Name</label><br>
  <input type="text" name="name" id="name" placeholder="Enter name">
</div><br>

<!-- Email Input -->
<div>
  <label for="email">E-mail</label><br>
  <input type="email" name="email" id="email" placeholder="Enter email">
</div><br>

<!-- Number Input -->
<div>
  <label for="age">Age</label><br>
  <input type="number" name="age" id="age" placeholder="Enter age">
</div><br>

<!-- Date Input -->
<div>
  <label for="birthdate">Birthdate</label><br>
  <input type="date" name="birthdate" id="birthdate">
</div><br>

<form> 태그 안에는 다양한 종류의 <input> 태그를 사용할 수 있으며, type 속성의 값에 따라 <input> 태그의 유형이 설정됩니다. 위의 경우는 한 줄 텍스트(text), 이메일(email), 숫자(number), 날짜(date)를 입력할 수 있는 <input> 태그들입니다.

한편 placeholder 속성의 값은 데이터가 입력되지 않은 상태에서 사용자가 어떤 정보를 입력해야 하는지 알려주는 간단한 텍스트이며, name과 id는 각각 백엔드(Backend)와 프론트엔드(Frontend)에서 사용되는 속성 이름입니다. id에 대해서는 향후에 더 설명하도록 하겠습니다.

※ 참고로 분할(Division) 태그와 너비(Span) 태그는 대표적인 비의미론적 태그(Nonsemantic tag)로써 주로 HTML 문서의 공간을 분할하거나 다른 컨텐츠를 담는 용기의 역할을 합니다. <div> 태그와 <span> 태그에 대해서는 향후에 더 설명하도록 하겠습니다.

▷ 입력 태그 : 라디오 버튼, 체크박스, 옵션 선택, 여러줄 텍스트

<!-- Radio Button Input -->
<div>
  <label for="membership">Membership</label><br>
  <div>
    <input type="radio" name="membership" id="membership" value="simple" checked>Simple
    <input type="radio" name="membership" id="membership" value="standard">Standard
    <input type="radio" name="membership" id="membership" value="super">Super
  </div>
</div><br>

<!-- Checkbox Input -->
<div>
  <label for="likes">I like...</label><br>
  <div>
    <input type="checkbox" name="likes" id="membership" value="bike" checked>Bike
    <input type="checkbox" name="likes" id="membership" value="car">Car
    <input type="checkbox" name="likes" id="membership" value="boat">Boat
  </div>
</div><br>

<!-- Select Option Input -->
<div>
  <label for="gender">Gender</label><br>
  <select name="gender" id="gender">
    <option value="male" selected>Male</option>
    <option value="female">Female</option>
    <option value="other">other</option>
  </select>
</div><br>

<!-- Textarea Input -->
<div>
  <label for="message">Message</label><br>
  <textarea name="message" id="message" cols="30" rows="10" placeholder="Enter Message"></textarea>
</div><br>

위의 코드는 type 속성의 값에 따른 라디오 버튼(radio)과 체크 박스(checkbox) 유형의 <input>태그, 아래 방향으로 펼쳐지는 리스트(Drop-down list)가 생성되는 옵션 선택(<select>, <option>) 태그, 그리고 여러 줄의 텍스트를 입력할 수 있는 <textarea> 태그입니다.

value 속성의 값은 백엔드로 전달되는 데이터의 값이며, checked 속성은 초기값 설정을 의미합니다. <textarea> 태그는 열(cols)과 행(rows)의 수로 크기를 설정할 수 있습니다. 겉보기에 라디오 버튼과 체크 박스는 형식이 거의 유사하지만 선택할 수 있는 대상의 수가 각각 단수와 복수라는 점이 다릅니다.

▷ 버튼 태그 : 제출, 리셋

<!-- Submit Input : Not recommended -->
<!-- 
<input type="submit" value="Submit">
-->

<!-- Submit Button -->
<button type="submit">Submit</button>

<!-- Reset Button -->
<button type="reset">Reset</button>

입력 양식을 모두 채워 넣었다면 이 모든 데이터들을 서버로 보내어 데이터베이스(Database)에 저장하거나 비즈니스 로직을 실행시켜야 하는데 이때 데이터를 보내는 결정을 하는 것이 제출 버튼(Submit button)이며, 양식을 처음부터 다시 작성하고 싶을 경우 모든 내용을 지워버리는 것은 리셋 버튼(Reset button)입니다. <button> 태그의 type 속성은 앞서 말한 대로 submit이나 reset을 값으로 가집니다.

한편 제출 버튼은 <input> 태그를 이용해서도 생성할 수 있는데, <input> 태그는 끝 태그가 없기 때문에 value 속성의 값으로 버튼 위에 보여지는 텍스트를 설정합니다. 그러나 스타일링이나 다른 태그의 중첩 사용이 불가능하기 때문에 <input> 태그를 이용한 버튼의 생성은 추천하지 않습니다.

이제 눈이 아닌 손으로 직접 작성해 보겠습니다.

728x90

'HTML & CSS > HTML5' 카테고리의 다른 글

[HTML] TIL6 : 엔티티의 종류 / 의미론적 태그의 역할 (0)	2021.04.06
[HTML] TIL5 : 블럭-레벨 및 인라인 요소의 특징 / 클래스 및 아이디 속성 활용 (0)	2021.04.06
[HTML] TIL3 : 기본 태그의 종류와 속성(2/3) - 리스트, 테이블 (0)	2021.04.05
[HTML] TIL2 : 기본 태그의 종류와 속성(1/3) - 주제, 단락, 앵커, 이미지 (0)	2021.04.04
[HTML] TIL1 : 웹 페이지의 기본 구조 해부 - html, 헤드, 바디 (0)	2021.04.04