html5 form

Form
사용자로부터 입력받고 입력한 데이터서버로 보낼때 사용
<form action= "처리할 페이지주소" method = "get/post"></form>
get : 주소입력창이 그대로보임 중요도가 낮은 정보를 보낼때 주로사용한다
post : 데이터가 외부에 드러나지 않고 보안이 좋다

input 요소

text : text입력 text가 보이게된다
<input type="text">

password : 비밀번호 text를 눌렀을때 text는 보이지 않고 ● 나온다
<input type="password">

file : 파일선택 내파일을 들고올수있다
<input type="file">
*accept = "image/*"하면 파일선택누르면 image파일이 먼저나온다 

checkbox : 체크박스
<input type="checkbox">

radio : 라디오버튼
<input type="radio">
*checked 하면 F5를 눌러도 그곳은 체크가되어져있다

textarea :  문장입력 여러줄의 텍스트를 입력할수있다
<textarea cols="열" rows="행" ></textarea>

 

 

button : 버튼입력 사용자가 누를수있는버튼
<input type="button" onclick="alert('경고문')">

 

submit  : 전송버튼

<input type ="submit" value="전송버튼">

 

fieldset : 필드셋 하나의 그룹으로 묶은것
legent : 필드셋에 제목을 달아주는 역할을한다
<fieldset style>
<legend>제목</legend>
</fieldset>

제목

input속성

value속성 : 입력필드의 초기값
readonly : 입력필드의 값이 초기값으로고정(form 값을 보낼때 전송됨)

<input type : "text" ,readonly> 
disabled : 입력필드를 사용할 수 없음(form 값으로 보낼때 전송되지 않음)

<input type : "text" disabled>

maxlength: 작성할수 있는 문자의 최대길이

<input type : "text" maxlength>

 

 

추가된 input요소

datalist : input 요소에 대해 미리 정의된 옵션리스트를 명시/익스플로러 지원하지 않음

<input list="colors" id="colors-choice">

        <datalist id = "colors">

        <option value = "black" label = "검정">

        <option value = "blue" label  = "파랑">

        </datalist>

 

value -이름과 원하는 곳 지정가능

number : 숫자입력

<input type = "number"> 숫자입력

 

 

 

range : 입력위치지정

0<input type ="range" min="0" max="100">100 입력범위지정

 

0

100

 

color : 색상입력

<input type ="color">색상

 

 

 

date : 날짜입력

<input type ="date">날짜

 

 

 

time : 시간입력

<input type ="time">시간

 

 

 

datetime-local : 날짜와 시간입력

<input type ="datetime-local">날짜와 시간

 

 

 

month : 연도와 월 입력

<input type ="month">연도와 월

 

 

 

week : 연도와 주 입력

<input type ="week">연도와 주

 

 

 

email : 이메일 입력

<input type ="email">이메일

 

 

 

url : URL 주소입력

<input type ="url"> url주소

 

 

tel : 전화번호입력

<input type ="tel">전화번호

 

 

search : 검색어 입력

<input type ="search">검색어

 

 

 

 

autocomplete : 입력된정보 저장할지 안할지명시

                    on으로 설정되면 브라우저는 사용자가 입력하는정보 자동저장

                   이후 입력하면 전에 입력한값저장되어있음

<form action="" autocomplete = "on">
        <input type="text" name="autocomplete">
</form>

 

 

 

 

novalidate : 입력정보전송할때 유효한지 아닌지 검사하지 않는것

                url타입이나 email타입 등 유효성검사하지않는다 그래서 서버측에서 유효성검사 따로해야된다

 

<form action="" novalidate>
        <input type="email">이메일
    </form>

 

이메일

 

 

autofocus : 웹페이지가 로드(load)될때, 속성이 적용된 input요소에 자동으로 포커스된다.

               F5누르면 커서가 autofocus한곳으로 포커스된다

 

<form action="">

  <input type="email">

  <input type="text" autofocus>

</form>

<form action="">

  <input type="email"><br>

  <input type="text" autofocus>

</form>

 

placeholder : input요소에 입력되어야 할 값에 힌트를 제공한다.

<form action="">
        <input type="text" placeholder="아이디를 입력해주세요">
    </form>

 

required : 반드시 입력해야할 input요소 명시

            입력해야 전송된다

<form action="">
        <input type="text"><br>
        <input type="text" required><br>
        <input type="submit">
    </form>