HTML 태그 예시

안녕하세요. crome 입니다 .

 

오늘은 예시를 통한 html 태그를 살펴 보겠습니다.

 

<input type=" text ">

 

HTML에서 텍스트 필드를 정의하는 태그

<input type="text" id="name" name="name">

<input type=" password ">

HTML에서 비밀번호를 입력할 수 있는 텍스트 필드를 정의하는 태그

비밀번호 필드가 비어 있으면 폼 전송이 금지되도록 required 속성을 사용합니다.

maxlength 속성을 사용하면 비밀번호의 최대 길이를 제한할 수 있습니다.

pattern 속성을 사용하면 비밀번호에 대한 정규식을 지정할 수 있습니다.

<input type="password" id="pwd" name="pwd" required>

<input type="button">

HTML에서 버튼을 정의하는 태그입니다. 주로 자바스크립트와 함께 사용하여 스크립트를 활성화하는 데 사용

<input type='button' value='클릭하세요' name='btnCheck' onclick="alert('안녕하세요!')" >

<input type="checkbox">

HTML에서 체크박스를 정의하는 태그입니다. 체크박스는 활성화되면 체크되는 사각형 박스로 표시됩니다. 체크박스를 사용하면 사용자가 제한된 수의 선택지 중에서 하나 이상의 옵션을 선택할 수 있습니다. 예를 들어, 다음과 같은 코드로 관심사를 선택하는 체크박스를 만들 수 있습니다.

 

<input type="checkbox" id="coding" name="interest" value="coding">
<label for="coding">코딩</label>
<input type="checkbox" id="music" name="interest" value="music">
<label for="music">음악</label>

 

<input type=" radio">

 

HTML에서 라디오 버튼을 정의하는 태그입니다. 라디오 버튼은 여러 개의 항목 중에서 하나만 선택할 수 있는 동그란 버튼입니다. 라디오 버튼은 같은 name 속성을 가진 그룹으로 묶여 있어서, 그룹 내에서는 한 번에 하나의 버튼만 선택될 수 있습니다. 라디오 버튼은 일반적으로 작은 원으로 표시되며, 선택되면 채워지거나 강조됩니다.

<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>

<input type="search">

입력 필드를 검색 필드로 지정하는 속성입니다. 이 속성을 사용하면 입력 필드에 검색 아이콘, 취소 버튼, 음성 인식 버튼 등이 추가될 수 있습니다

<input type="search" name="isearch" placeholder="검색어를 입력하세요">

<input type="email">

이메일 주소를 입력할 수 있는 입력 필드를 정의하는 속성

list 속성은 <datalist> 태그와 함께 사용하여 사용자에게 제안할 이메일 주소 목록을 제공

<input type="email" name="userEmail" list="emails">
 <datalist id="emails">
 <option value="example1@example.com">
 <option value="example2@example.com">
 <option value="example3@example.com">
</datalist>

<select>

HTML에서 드롭다운 리스트를 만들 때 사용하는 태그입니다. 드롭다운 리스트는 사용자가 여러 옵션 중에서 하나를 선택할 수 있게 해주는 메뉴입니다. <select> 태그 안에는 <option> 태그를 사용하여 각각의 옵션을 정의할 수 있습니다.

   <select name="color">
  <option value="red">빨강</option>
  <option value="green">초록</option>
  <option value="blue">파랑</option>
  </select>

 

오늘은 HTML의 태그의 예시들을 알아보았습니다.

 

도움 되셨다면 공감 및 댓글 주세요.

 

감사합니다.