U E D R , A S I H C RSS

html5/form

1. 요약

  • 웹 양식을 지원하는 태그를 폼 태그(Form Tag)라 한다
  • 폼 태그는 HTML 문서에서 사용자 입력을 위해 제공되는 양식 태그
  • 추가요소(webForm 2.0)
    • 입력 양식 : Range 양식, email등
    • 입력 보조 수단
    • 입력 값 검증 등

1.2. webForms2 library

2. new feature

2.1. new type

  • search
  • tel
  • url
  • email
  • datetime, date, month, week, time, and datetime-local
  • number
  • range
  • color

2.2. new attribute

  • list — 값의 제한을 포함하는 datalist element를 의미
  • max and min - 유요한 날짜, 시간 그리고 숫자 값
  • pattern - 제약적인 정규식을 허용
  • placeholder - field에 text hint를 보여 줌

3. element

3.1. range

3.2. number

  • <input type="number" min=1 max=10 step=1 value=5>

3.3. date

3.4. input-type

  • search 타입, 전화번호 입력을 위한 tel 타입, 리소스 주소 입력을 위한 url 타입, 이메일 입력을 위한 email 타입, 색상 입력을 위한 color 타입 등이 새로 추가
  • 참고: 새로운 입력(input) 양식에 대한 다음 글을 참고하기 바란다

4. input support

4.1. focus


<input type='search' autofocus>
<input type='email' placeholder="이메일 주소 입력">
<input type='tel' placeholder="전화번호 입력">

4.2. file upload

  • multi file upload
    • <input type='file' multiple>
  • file filtering
    • <input type='file' accept="image/gif">
  • files 속성

    <script type="text/javascript">
      var selectedFiles = document.getElementById("file").files;
      selectedFiles[0].name; //파일이름
      selectedFiles[1].size; //파일사이즈 
    </script>
    

4.3. form submit

  • 폼 전송 버턴인 submit, image 버튼에도 전송 방법, 위치를 정할 수 있다.
    <form>
        <input type="submit" formmethod="POST" formaction="/formOk.html">
    </form>
    

5. 추가된 폼 양식

5.1. progress

  • <progress max="1" value="0"></progress>

5.2. Output

  • form 으로 전송되고, 값을 사용자가 조정 불 가능하다.
  • hidden 과 비슷하지만 표시되는 컨트롤
  • <output name="sum">100</output>

5.3. DataList

  • input 박스에 포커스가 오면 이 리스트를 보여준다
  • input 양식의 option 선택
    http://cfile30.uf.tistory.com/image/16593B0B4C774BE27544CA
    <input type="url" list="url_list" />
      <datalist id="url_list">
      <option label="모바일플랫폼" value="http://m.mkexdev.net" />
      <option label="MKEX의닷넷" value="http://www.mkexdev.net" />
      <option label="Microsoft" value="http://www.microsoft.com" />
    </datalist>
    

5.4. Keygen

  • 암호키 생성
  • 공개키기반의 키 쌍을 생성하며 폼 전송 시 공개키가 서버로 전송된다.
  • 다음은 RSA 키를 생성하는 코드이며 브라우에 이 요소가 표시될 때 키의 길이를 선택하도록 표시된다
  • <keygen name="key" keytype="rsa"></keygen>
    http://cfile3.uf.tistory.com/image/127695134C77472C21DF54

5.5. Meter

  • 용량과 임계치가 존재하는 상황에서 현재 사용량을 보여주는 UI
  • min, max 로 최소값과 최대값(임계치)를 설정하며 현재 사용량의 정도(낮음, 높음, 적정)을 나타내는 low, high, optimum 속성이 제공된다.
  • <meter min="0" max="10"></meter>

6. 유효성 검사

  • 폼의 자동 유효성 검사를 꺼두고 싶다면 폼에 novalidate 를 부여하면 된다
    • <form novalidate action="demo_form.asp" method="get">

6.1.

  • <input type=email>에 입력된 값이 이메일 패턴과 다를 경우 폼은 전송되지 않고 에러 메시지를 표시해 준다.
  • 입력 양식에 required 속성을 부여하면 빈 값이 허용되지 않는다
  • 입력 양식에 pattern 속성으로 정규표현식으로 입력 패턴을 지정할 수 있다
    • <input type="text" name="postCode" pattern="/^\d{3}-?\d{3}$/" title="123-123">
  • http://cfile8.uf.tistory.com/image/186D8B0E4C774FD32BED8B

7. Event

  • forminput, formchange

7.1.

  • 글이 입력될 때 마다 아래로 복사하고 글자 수를 표시하는 코드
    <form onforminput="ta2.value = ta1.value;textLength.value=ta1.value.length;">
      <textarea id="ta1"></textarea> <br>
      글자 복사 ↓<br> 
    </form> 
    
    <textarea id="ta2"></textarea>
    글자 수:<output id="textLength"></output>
    
  • opera
    http://cfile29.uf.tistory.com/image/20444E0B4C77793149EE87
Valid XHTML 1.0! Valid CSS! powered by MoniWiki
last modified 2021-02-07 05:31:41
Processing time 0.0294 sec