1. form - action, method 속성 >

액션은 목적지의 주소, 서버 주소 등 넣을수 있다.
메소드는 post / get / dialog
get은 url에 비밀번호 다 나와서 보완이 취약(post 사용해야 함)

다음 아래에 나오는 모든 것들은 form태그 안에 들어갈 수 있는 내용.
<form action="" method="get">
</form>


2. label과 input

시맨틱 요소에서 label 좋다. 인풋 앞 태그에 사용 굿

<form action="" method="get">
<label for="food">음식 : </label> <input>
</form>


3. fieldset, legend

fieldset 폼요소 바깥으로 묶는. 그룹을 만들수 있는.
legend 그룹의 설명

<fieldset>
<legend> 범례1 </legend>

<form action="" method="get">
<label for="food">음식 : </label> <input>
</form>
</fieldset>


4~6. input - type 속성>

type text같은 데서,
minlength="1" 입력 가능한 최소 글자 수
maxlength="10" 입력 가능한 최대 글자 수
인풋 속성은 사용할때 그때그때 새롭게 검색하는게 굿
type="submit" value="제출하기"

type="radio" name="네임 값은 동일하게">

<fieldset>
<legend> 범례1 </legend>

<form action="" method="get">
<label for="color">색깔 : </label>
<input type="text" name="color" >
</form>
</fieldset>


7. input - name, placeholder, autocomplete, required 속성

<input type="text" name="username" >
이런식으로 name속성 적으면 제출시 구분이됨.

autocomplete 는 양식을 자동으로 생성.
<input type="text" name="username" autocomplete="on">
인풋 누르면 과거에 썼던 부분 뜸, 과거값 후보로 뜨게함.

<input type="text" name="username" autocomplete="on" required>
required 넣으면 인풋에 필수로 적으란 의미.


8. input - disabled, readonly 속성

<input type="text" name="username" autocomplete="on" disabled>
disabled 넣으면 인풋에 적지 못하게 되있음.

<input type="text" name="username" autocomplete="on" readonly>
readonly 마우스가 포커싱은 되는데 클릭시, 쓰라고 깜빡이진 않음.쓰지도 못함
즉, 읽기 전용이라는 것. 잘안씀;;


9. input - step, min, max

<input type="number" mix="0" max="100"> 숫자 넣는 값 범위 설정.
즉, 유효성 검사가 가능하게 되~ email도 그렇고 ㅋ

<input type="range" mix="0" max="100">
range 태그는 퍼센트 바. 여기에 max min 속성+값 넣으면
그 값의 기준이 됨. 가장 낮은 값이 min값이 되고 큰값은 max


10. button

<button type="reset">초기화</button>
<button type="submit">전송</button>
<button type="button">빈 버튼</button>

type="" 값 안에는 reset , submit , button이 있다.


11. select, option, optgroup

select는 드롭다운. option는 select의 자식 태그

옵션에 나온것만 선택 가능해서 제출.

<form action="" method="get">
<label for="LovePets">키우는 동물 : </label>
<select name="pets">
<option value="">옵션을 선택해 주세요</option>
<option value="dog">강아지</option>
<option value="cat">고양이</option>
</select>
<input type="submit">
</form>


12. input - list 속성과 datalist

가능한 선택지를 ★추천(select와의 차이점)하는 태그.

커서 hover시 화살표 생김.
누르면 주르면 후보 나옴.선택안하고 input에 마음대로 써도 제출가능.
앞글자에 빨만 써도 아래 빨강 추천뜸.

<form action="" method="get">
<label for="color-choice">좋아하는 색:</label>
<input list="colorList" name="color-choice" />

<datalist id="favoriteColor">
<option value="red">빨강</option>
<option value="yellow">노랑</option>
<option value="green"> 초록 </option>
</datalist>
<input type="submit">
</form>


13. textarea

rows는 보여줄수 있는 줄 수.그 이상은 스크롤
width도 되지만 rows를 많이 씀. 가로는 cols

<form action="" method="get">
<lavel for="comment">댓글 : </label>
<textarea name="comment" id="commnet" row="5">
추천 합니다. 미리 들어있는 글.
</textarea>
</form>

두고 두고 볼 수 있는 기초 지식ㅇ_ㅇ)!

profile
개발자_프론트엔드_꼬리에 꼬리를 무는 호기심

0개의 댓글