HTML 기본(form 관련 태그)

나 정말 시간없고, 별로 안쓸내용들인거 아는데... 이런것들부터 차근차근 채워나가야 나중에 도움이 될거고. 

최대한 자세하게 배우는게 내 공부 스타일라서.. 이렇게 안배우면 내가 다음에 배우는 것들 귀에 안들어오고 붕 떠버림.ㅠ

 

 

<hn></hn> : 1부터 큰 제목을 표시함. 1은 가장 중요한 것을 한번만 쓰는 대표제목임.

h1, h2 같은 것들 안쓰면 h3, h4같은 하위 <hn>도 못쓰니 순서대로 사용해서 내려오자.

<p></p> : 문단  

</br> : 줄바꿈

<blockquote> 긴 문장 인용

<q> 작은 문장 인용 

<ins></ins> 새롭게 삽입되는 밑줄쳐진 인용문장

<del></del> 기준의 어떤 내용 삭제할때 사용 

 

<div></div> : 크든, 작든 요소들을 분류하여 그룹화 하는데 사용

<span></span> 작은 글자들 간 따로 분류해서 그룹화 할  사용

<ul></ul> 순서없는 list 생성

<ol></ol> 순서있는 list 생성

 

<a></a> 다른 문서 또는 내부의 다른 영역과 연결할 때 사용. 주로 href와 같이 쓰임

<img> 이미지. src(이미지 경로 표시)와 alt(이미지 설명 표시)를 필수적으로 같이 사용

<strong></strong> 문장 강조.

<em></em> 단어 강조.

 

---

<form></form> 폼의 요소 사용가능. action(폼의 요소를 어떤 서버에 전송할 것인지 경로지정),

method(전송타입)를 추가로 사용가능 

<input="출력되는 다양한 요소이름" /> 줄을 입력가능한 칸이나, 라디오박스, 체크박스 등 생성가능

 

 

<label>다음 요소 설명 키워드</label> <어떤 태그> : <label> 다음에 오는 다음 태그요소를 설명.

 

[for를 통해서 다음태그와 상호작용 가능해짐.]

---

 

<input 응용해보기 >

 

<label>아이디: <input type="text" id="user_id" size="10" value="??" maxlength="10"></label>

 <label>비밀번호: <input type="text" id="user_pw" size="10" value="비번"></label>

 

 

코드 출력물

 

<input 타입 속성들 type="text"에서 많이 사용>

 

-size: 크기 지정

-value: 창에 값 미리 입력가능

-maxlength : 길이 제한

 

 

 

 

<input 추가 타입들 type = "search", type = "url", type = "email", type ="tel" >

type = "search" : 웹 브라우저 화면으로 볼 때는 텍스트 필드와 똑같지만 웹 브라우저에서는 검색을 위한 텍스트 필드로 인식한다. 

type = "url" : 웹 주소를 입력하는 필드

type = "email" : 이메일 주소를 입력하는 필드 

type = "tel" : 전화번호를 나타내는 필드

---

 

아래 코드 출력 결과

 

 

<fieldset>

    <legend>상품 선택</legend>

    <p><b>주문할 상품을 선택해 주세요.</b></p>

    <label><input type="checkbox" value="p_2">선물용 2kg</label>

    <label><input type="checkbox" value="p_5">선물용 5kg</label>

    <label><input type="checkbox" value="d_2">가정용 2kg</label>

    <label><input type="checkbox" value="d_5">가정용 5kg</label>

    <p><b>포장 선택</b></p>

    <label><input type="radio" name="gitf" value="yes">선물 포장</label>

    <label><input type="radio" name="gitf" value="no">선물 포장 x</label>

  </fieldset>

 

 

-radio type은 중복 체크 불가 양자택일 선택지에서 사용. [같은 name 다른 value값 지정.]

-checkbox type은 중복 체크 가능

-<b></b> 글자 진하게 강조.

 

 

 

 

<체크박스, 라디오 박스에서 사용하는 속성>

1. value : 선택한 체크 박스나 라디오 버튼을 서버에게 알려 줄 때 넘겨줄 값을 지정한다.  

2. checked : 여러 항목 중에서 기본으로 선택해 놓고 싶은 항목에 사용한다. 

3. name : 라디오 버튼에서 name 속성을 사용하는데 name 속성은 php 와 같은 웹 프로그래밍에서 폼 요소를 제어할 때 자주 사용한다. 

 

<fieldset></fieldset> : 필드를 만들어 그 안에 여러 태그를 넣어서 그룹화 있음.

<legend></legend> : fiedset으로 그룹화 한 것들을 대표하는 제목지정 가능.

<textarea><textarea> : 여러줄 입력가능하도록 공간을 크게 확보

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 

<select></select> + <option></option> :

- option 항목을 select 안에 모아둠. select 박스 그 이메일 고르기 박스생성

- 특정 option을 selected를 option 뒤에 적어서 그 항목이 선택된 상태로 박스창을 띄워놓을 수 있음.

<button></button> : <input>과 똑같은 박스 생성. input 태그 보완을 위해 나온 태그임. 가능한 버튼 태그 사용.

---

속성(태그에 추가되는 속성들)

- disabled : 아예 건들 수 없게 희미해짐

- readonly : 읽기만 가능, 수정 불가 

- maxlength: 길이 값 제한

- checked : check박스가 check된 상태로 나오게끔

- placeholder: 입력 요소에 대한 힌트가 나오게끔 ( 아이디창에 아이디라고 미리 적혀있는데 누르면 삭제되는 그거)