html의 양식을 만드는 Tag 들 !

 

1. <form></form>

<form> 태그는 웹 서버에 정보를 제출하기 위해 필요한 여러 양식의 범위를 지정한다.

<form> 태그 내부에는 또 다른 <form> 태그가 들어갈 수 없다.

<form> 태그의 속성

• action 속성은 값으로 전송한 정보를 처리할 웹페이지의 경로를 입력해준다.
• autocomplete 속성은 이전에 양식에 입력한 값으로 자동 완성 기능을 사용할 것 인지 아닌지 정해준다 값으로는 on/off                      기본 값은 on 이다.
• method 속성은 서버로 전송할 HTTP 방식을 설정해준다. 값으로는 GET과 POST 가 있으며 기본값은 GET이다.                              GET 방식은 입력한 정보가 URL 주소에 담겨서 전송됨.
  POST 방식은 입력한 정보가 URL 주소에 노출되진 않는다. 일반적으로 많이 사용된다.
• name 속성은 전송될 양식이 어떤 것인지를 값으로 입력해 줄 수 있다.
• novalidate 서버로 전송될 양식 데이터의 유효성 검사를 하지 않게 해 준다. test를 할 때 주로 사용한다.
• target 서버로 전송 후 응답받을 방식을 정한다 값으로 응답 후 새창에 띄우려면 _blank , 현재 창에 띄우려면 _self 기본값은 _self 다.

2. <input/>

<input/> 태그는 사용자에게 입력을 받을 데이터의 양식을 정한다.

<input/> 태그의 속성

• autocomplete 속성은 이전에 양식에 입력한 값으로 자동 완성 기능을 사용할 것 인지 아닌지 정해준다 값으로는 on/off                      기본 값은 on 이다.
• autofocus 속성은 페이지가 로드될 때 자동으로 포커스 되게 해 준다. 문서 내에 한 곳에서만 사용할 수 있다.
• form 속성은 <input/> 태그가 <form> 태그의 후손 요소가 아닐 경우에 값으로 연결해줄 <form> 태그의 id 값을 넣어                      해당 <form> 태그에 연결해준다.
• name 속성은 전송될 양식이 어떤 것인지를 값으로 입력해 줄 수 있다
• placeholder 속성은 사용자에게 입력해야 하는 값의 힌트를 준다. type 속성이 text, search, tel, url, email 등 일 때만 사용 가능
• max 속성은 지정할 수 있는 값의 최대값을 정해준다. type 속성이 number 일 경우만 사용 가능
• min 속성은 지정할 수 있는 값의 최소값을 정해준다. type 속성이 number 일 경우만 사용 가능
• value 속성은 양식의 초기값을 정해준다.
• multiple 속성은 여러 개의 값을 입력할 수 있는지 여부를 정해준다. type 속성이 file, email 일 경우만 사용 가능
• checked 속성은 양식이 선택된 상태로 표시되게 해 준다. type 속성이 radio, checkbox 일 경우만 사용 가능
• type 속성은 입력받을 데이터의 종류를 값으로 입력해준다.                                                                                                             값으로는 button, checkbox, password, email, file, submit, radio, number, tel, search, url, reset 등...
• required 반드시 입력을 받아야하는 양식에 사용한다.

3. <label></label>

<label> 태그는 라벨 가능 요소(<button>, <input>, <progress>, <select>, <textarea>) 의 제목을 설정해줄 수 있다.

라벨 가능 요소가 <label> 태그의 내부에 없는 경우에는 라벨 가능 요소의 id 값을 <label> 태그의 for 속성을 이용해 값으로 입력하여

연결해줄 수 있다.

 

4. <button></button>

<button> 태그는 선택 가능한 버튼을 만들어준다.

※주의사항 <input> 의 type="button" 과 <button> 태그는 기본적으로 box-sizing: border-box 이다

<button> 태그의 속성

• autofocus 속성은 페이지가 로드되었을 때 자동으로 포커스 해준다.
• disabled 속성은 버튼을 비활성화할 때 사용한다.
• form 속성은 <button> 태그가 <form> 태그의 내부에 작성되지 않았을 때 값으로 <form> 태그의 아이디 값을 입력하여 연결해준다.
• name 속성은 전송되는 버튼의 이름을 설정해줄 수 있다.
• type 속성은 버튼에 타입을 설정해주며 값으로는 button, submit, reset 이 있다.

5. <textarea></textarea>

<textarea> 태그는 여러 줄의 일반 텍스트를 입력할 수 있는 양식을 만들어준다.

<textarea> 태그의 속성

• autocomplete 속성은 이전에 양식에 입력한 값으로 자동 완성 기능을 사용할 것 인지 아닌지 정해준다 값으로는 on/off                      기본 값은 on 이다.
• autofocus 속성은 페이지가 로드될 때 자동으로 포커스 되게 해 준다. 문서 내에 한 곳에서만 사용할 수 있다.
• form 속성은 <textarea> 태그가 <form> 태그의 후손 요소가 아닐 경우에 값으로 연결해줄 <form> 태그의 id 값을 넣어                      해당 <form> 태그에 연결해준다.
• name 속성은 전송될 양식이 어떤 것인지를 값으로 입력해 줄 수 있다
• placeholder 속성은 사용자에게 입력해야 하는 값의 힌트를 줄 수 있다.
• rows 속성은 입력하는 양식의 보이는 줄 수를 정해줄 수 있다 기본값은 2이다.

6. <fieldset></fieldset> , <legend></legend>

<fiedset> 태그는 같은 목적의 양식을 그룹화해주고 <legend> 태그는 그룹화한 양식의 제목을 지정해준다.

<fieldset> 태그의 속성으로는 <form> 태그와 연결해주는 form 속성과 그룹화한 양식의 이름을 정해주는 name 속성이 있다.