HTML | 목록 태그와 폼 태그

새니·2023년 7월 13일

목록 보기

5/5

목록(List) 태그

HTML에서 <ul>과 <ol>은 목록(list)_ 을 만들기 위해 사용되는 태그입니다.

ul>: 순서가 없는 목록을 정의하며, 각 항목은 기본적으로 원점(•)으로 표시됩니다.
<ol>: 순서가 있는 목록을 정의하며, 각 항목은 번호로 표시됩니다.
<li>: 목록의 항목을 정의합니다.

<ul>
  <li>항목 1</li>
  <li>항목 2</li>
  <li>항목 3</li>
</ul>

😁출력

항목 1
항목 2
항목 3

<ol>
  <li>항목 1</li>
  <li>항목 2</li>
  <li>항목 3</li>
</ol>

항목 1
항목 2
항목 3

<ul>과 <ol> 태그는 목차, 단락의 요약, 항목 목록 등 다양한 정보를 구조화하는 데 사용됩니다. 각 목록 항목은 블록 레벨 요소로 간주되어 줄 바꿈을 포함하고, 스타일 시트를 통해 다양한 디자인을 적용할 수 있습니다.

폼(Form) 태그

<form> : 태그는 웹 페이지에서 사용자 입력을 받기 위해 사용되는 요소. <form> 태그는 사용자가 입력한 데이터를 서버로 전송할 때 사용되며, 다양한 입력 필드와 버튼을 포함할 수 있다.

형태 : <form action=' ' method=' ' >

[꼭 들어가야 할 요소]

action = API주소, 접근가능한 URL, 뭘 넣어야 할지 모르를때는 '#"

form 값을 입력하면 action이 일어나야하니까 필요함

method : 사용자가 입력한 내용들을 서버 쪽 프로그램으로 어떻게 넘겨줄지 지정
post : 입력한 내용이 들어나지 않음
get : 주소표시줄에 사용자가 입력한 내용이 그대로 드러남

label 태그 : 폼 요소에 레이블 붙이기

<lable for = 'input id'> : 대상이 꼭 필요!

ex) <label for='user_name'> 이름</label>

      <input type='#' id='user_name'>

fieldset : 폼안에서 여러구역을 누어 표시하려고 할때 하나로 묶어줌
legend : 묶은 그룹의 제목을 붙여줌

input

<input>: 사용자 입력 필드를 정의
<input> 요소는 type 속성을 사용하여 각각의 종류를 지정한다.
type에 들어가는 값을 적어줘야한다. ex) email이면 email을 적어야함
input (입력창, 인풋필드) : 닫는 태그가 없음 <input type=' ' >
type의 종류 : text,email,passward,number,url,file

radio : 둘 중 하나만 선택
check box : 중복 성택 가능
button : 버튼 형태를 만들어줌 type을 꼭 적어야함

(submit: 서버 전송, reset : 입력 내용 지움 button : 그냥 버튼 )

input태그의 속성들

autocomplete : 자동완성기능 (on,off로 지정해서 사용할 수 있음)
autofocus :페이지를 불러오자마자 폼의 요소 중에서 원하는 요소에 마우스 커서를 표시
placeholder : input 안에 들어가는 기본적으로 보여주는 값
maxlength='13' : 허용되는 글자수 제한 태그
minlength='5' : 최소로 꼭 적어야 하는 태그
required : 필수 필드 지정 _ 창이 넘어가기 위해서 적어야할 필수요소!

태그가 있는 input값이 꼭 들어가야 submit이 가능
readonly : 읽기 전용 필드 (입력은 안되고 사용자에게 내용을 보여주기 위한 요소)
disabled: 사용자가 input 값을 적지 못하게 막는 태그
value: 기본값을 미리 적음 ('placeholder'랑은 다른 개념 : 실제 input값이기 때문)
max,min : min='12' max='122' ->12세 이상 122세 이하 (숫자의 범위를 지정_)

select태그 : 드롭다운 목록!

<select> : 드롭다운 목록을 정의. <option> 요소를 사용하여 목록의 각 항목을 정의하고, 사용자는 목록에서 항목을 선택할 수 있다.
select size : 화면에 표시될 드롭다운 메뉴의 항목 개수를 지정
select multiple : 여러개의 항목 사용가능

ex) <select size='5' id='class' multiple>

다섯개씩 보이고 (size) 여러옵션이 선택 가능(multiple)

<textarea> : 여러 줄의 텍스트 입력 필드를 정의. rows와 cols 속성을 사용하여 크기를 조정할 수 있다
rows = '40' ->40줄
ols = '50' ->50칸



<form action="/submit-form" method="post">
  <label for="name">이름:</label>
  <input type="text" id="name" name="name">

  <label for="email">이메일:</label>
  <input type="email" id="email" name="email" >

  <label for="message">메시지:</label>
  <textarea id="message" name="message" rows="4" cols="40"></textarea>

  <input type="submit" value="전송">
</form>

😁출력

이름:

이메일:

메시지:

name 속성: <form> 안의 각 입력 필드에는 name 속성이 있어야 합니다. name 속성은 해당 입력 필드의 이름을 정의합니다. 서버로 전송될 때, 이 이름을 기반으로 입력 필드의 값이 서버로 전송됩니다. name 속성은 서버 측에서 해당 필드의 값을 식별하기 위해 사용됩니다.
value 속성: value 속성은 입력 필드의 초기값을 정의합니다. 사용자가 입력 필드에 값을 입력하지 않았을 때 기본값으로 사용됩니다. 예를 들어, 텍스트 입력 필드(<input type="text">)의 경우 value 속성은 초기 텍스트를 제공하고, 체크박스(<input type="checkbox">)나 라디오 버튼(<input type="radio">)의 경우 선택 여부를 지정합니다.

또한, 사용자가 입력 필드에 값을 입력하거나 선택하면, 해당 입력 필드의 값은 name=value 형식으로 서버로 전송됩니다. 이때 name은 입력 필드의 name 속성 값이 되고, value는 사용자가 입력한 실제 값이 됩니다.

그렇기 때문에 form 태그 안에서 name 속성과 value속성은 중요합니다.