html form , input 요소 정리

폼요소css

<form>	문서의 구획 지정 로그인, 회원가입, 글쓰기 등등 웹페이지 내에서 사용자로부터 입력을 받을 떄 사용한다. 서버로 데이터를 전달에 처리할수 있도록 기능
폼 입력양식	<form action="데이터를 보낼 파일 위치"   method="데이터 전송 방법"   name="폼의 이름"
<fieldset>	form 작성시 필수! form 요소에서 연관된 요소들을 하나의 그룹으로 묶을떄 사용
<legend>	fieldset 안의 필수 태그 작성되는 form 의 제목설정

 

 

tabel 폼 작성시 예시 

 <form>
  <fieldset>
   <legend>문의 작성하기</legend>
    <table>
     <caption>문의 작성하기 테이블</caption>
      <tr>
        <th class="col01">이름</th>
          <td><input type="text" readonly value="박효진"></td>
      </tr>
     </table>
   </fieldset>
  </form>

 

---

 

input type 속성
password	사용자로부터 비밀번호받기 (*또는 동그라이모 표시가 가려짐)
radio	여러개 옵션중 하나의 옵션 체크 반드시 모든 여러개의 input 요소의 name 속성이 같아야함 checked : 여러개의 옵션중에 미리 선택되는 옵션 지정가능 <input class="blind" id="fruit1" type="radio" name="fruit" checked>
checkbox	사용자로부터 여거개 옵션중 다수의 옵션을 입력 받을 수 있다. 마찬가지로
file	사용자로부터 파일을 전송 받을 수 있다.
text	사용자가 내용을 입력할 수 있다. textarea placeholer 줄 바꿈시 html entity 문자 사용 &#10;
button	버튼을 정의 (디자인은 기본으로나옴)
작성법	<input class="input_file" type="text" readonly title="파일명">
주의사항	- 체크박스, 라디오, file type등은 모양변경이 불가하므로 label:before를 이용 - 브라우저 환경마다 디자인이 다르므로 초기화 코드사용
추가 readonly	input 태그에 사용하는 속성 (textarea 태그도 가능) 입력창의 내용을 변경 할 수 없게끔 읽기전용으로 만들때 사용 예) 이름을 먼저 입력해 둘때

 

 

* input 요소 웹 접근성 class 명 bilnd

화면엔 나타나지 않지만 시각장애인을 위한 리더기에 읽히게 하기 위해서  class 명을 bilnd 로 지정한다.

대부분 caption, label, legnd 등을 안보이게 처리

안할시 웹 접근성 위반

display:none 사용시 시작장애인도 읽지 못함.

 

 

 

 

태그들 예시

<input type="text" readonly value="박효진" title="이름입력">

<td><input type="text" readonly title="연락처 입력"></td>

<input class="input_small" type="text" readonly title="이메일">

 

<input type="text" placeholder="제목을 입력해주세요" title="제목입력">

 

 

 

                        <textarea rows="10"

                          placeholder="가맹점 신청과 관련된 문의사항을 작성해 주세요.&#10;문의하실 내용을 구체적으로 작성해 주시면 더욱 빠르고 정확한 답변을 드릴 수 있습니다."

                          title="내용입력"></textarea>