[CSS] <Form> 태그 -1

NAM·2022년 5월 16일
0
<form> method="get or post"

get: 데이터를 256~4096 byte까지만 서버로 넘길 수 있습니다.
post: 입력한 내용의 길이에 제한받지 않고 사용자가 입력한 내용도 드러나지 않습니다.



 <form> name="javscript로 제어할때 사용할 폼의 이름"
 <form> action="태그 안의 내용을 처리해 줄 서버 프로그램을 지정"
 <form> target="action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열도록 한다."
 <form autocomplete="off"> 예전에 입력한 내용 자동완성기능 끄기 



폼 요소를 그룹으로 묶는 태그

<fieldset>,<legend>

필드셋은 하나의 폼을 여러구역으로 나눠서 표시할 때 사용.
예를 들어, 쇼핑몰 사이트에서 주문서를 작성할 때 개인 정보와 배송 정보를 나눠 표시하면 사용자가 입력하기도 편하고 화면도 깔끔하게 정리

기본형 <fieldset 속성="속성값"></fieldset>

레전드 태그는 다음과 같이 필드셋 태그로 묶은 그룹에 제목을 붙일 수 있다.

<fieldset>
  <legend>그룹 이름 </legend>
<fieldset>
상품 선택 배송 정보

다음은 상품 주문 양식을 만들 때 < fieldset >태그와 < legend > 태그를 사용해서 상품 선택과 배송 정보를 그룹으로 묶은 것이다.


폼 요소에 레이블을 붙이는 < lable > 태그

< lable > 태그는 < input > 태그와 같은 폼 요소에 레이블을 붙일 때 사용한다. 레이블(lable)이란 입력란 가까이 아이디나 비밀번호처럼 붙여 놓은 텍스트를 말한다.

다음 예시는 사용자가 아이디를 입력하는 폼 요소의 앞뒤에 < labl e>과
< /lable > 태그를 붙여 작성합니다.

< lable > 태그 안에 < input > 태그 넣기
<lable> 아이디 (6자 이상) <input type="text"/> </label>

아이디 (6자 이상)



두번째 방법은 < lable > 태그와 폼 요소를 따로 사용하고 < lable > 태그의 for 속성과 폼 요소의 id 속성을 이용해 서로 연결하는 것이다. 다시 말해 폼 요소의 id 속성값을 < lable > 태그의 for 속성에게 알려주는 방법을 사용한다.

<lable for="id명">레이블명<input id="id명"></lable>  

예시) 아이디를 입력하는 폼 요소에 id="user-id"라고 지정한다. 그리고 그 폼 요소에 연결된 < lable > 태그에 for="user-id" 라고 입력해 폼 요소와 레이블을 연결한다.

<lable for="user-id">아이다 (6자이상)</lable>
<input type="text" id="user-id">

아이디 (6자이상)

이 방법의 장점은 레이블과 사용자 정보를 입력받는 인풋태그가 떨어져있더라도 둘 사이를 쉽게 연결할 수 있다는 장점이 있다.

profile
힘내자

0개의 댓글