[웹 기초] HTML #5

HTML 입력 폼

https://www.w3schools.com/tags/ 를 참고

보통 어떤 웹 페이지에 처음 접속하여 가입하려 할 때 이름 및 아이디, 비밀번호 등을 입력하는 폼을 본 적이 있을 것이다. 이때 필요한 tag들을 살펴볼 것이다.

<button>

입력에 가장 많이 사용되는 것은 버튼일 것이다. <input>으로도 버튼을 만들 수 있지만, <button>은 버튼 전용 tag라고 생각하면 된다.

<button type="button" onclick="alert('Hello world!')">Click Me!</button>

type 속성에 “button”을 지정하지 않아도 잘 작동하지만 type=”button”를 해주는 것이 권고사항이다.

onclick 속성에는 javascript 코드가 들어가며 버튼을 클릭하였을 때 onclick에 지정된 코드가 실행된다.
참고로 코드부분을 따로 꺼내서 관리하는 것도 가능하다.

<script>
  function testFunc() {
    alert('Hello world!')
  }
</script>

<button type="button" onclick="testFunc()">Click Me!</button>

<button>과 <input>의 차이점은 <button>은 안에 다른 tag들을 포함할 수 있지만 <input>은 불가능하다.

<button type="button" onclick="alert('Hello world!')">
  <img src="/assets/img/posts/webserver/img_girl.jpg" alt="Girl in a jacket" width="100" height="120">
</button>

<input>

사용자가 데이터를 입력할 수 있는 입력 필드를 지정한다. <input>은 type 속성에 따라 여러가지 방법으로 표시될 수 있다.

• <input type=”button”>
• <input type=”checkbox”>
• <input type=”color”>
• <input type=”date”>
• <input type=”datetime-local”>
• <input type=”email”>
• <input type=”file”>
• <input type=”hidden”>
• <input type=”image”>
• <input type=”month”>
• <input type=”number”>
• <input type=”password”>
• <input type=”radio”>
• <input type=”range”>
• <input type=”reset”>
• <input type=”search”>
• <input type=”submit”>
• <input type=”tel”>
• <input type=”text”>(기본값)
• <input type=”time”>
• <input type=”url”>
• <input type=”week”>

다 외울 필요는 없고 필요할 때마다 찾아 사용하면 된다.
<input>을 사용해 입력 폼을 간단히 만들어보면 다음과 같다.

<h4>The input element</h4>

<form action="/action_page.php">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
</form>

<p>"Submit" 버튼을 클릭하면 양식 데이터가 "action_page.php"라는 서버의 페이지로 전송됩니다.</p>

The input element

First name:

Last name:

"Submit" 버튼을 클릭하면 양식 데이터가 "action_page.php"라는 서버의 페이지로 전송됩니다.

<form>은 <input>과 <button> 등을 그룹화하여 하나의 폼으로 관리하기 위한 tag이고,
<label>은 각 요소에 어떠한 요소인지 정의해주는 역할을 한다. <label>을 사용할 때는 for 속성을 해당 요소의 id 속성과 같게 지정해주어야 한다.(for 속성과 id 속성이 같아야 함께 바인딩이 된다.)

<h4>The label element</h4>

<p>Click on one of the text labels to toggle the related radio button:</p>

<form action="/action_page.php">
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label><br><br>
  <input type="submit" value="Submit">
</form>

The label element

Click on one of the text labels to toggle the related radio button:

    HTML
    CSS
    JavaScript