양식
-
[HTML] 양식(8) - progressHTML 2020. 8. 30. 20:20
▶ 작업 완료의 진행률을 표시. - 로딩바(loading bar)와 유사. 속성 max: 작업의 총량. 완료되었을 때의 값을 의미. - 숫자 값 입력. value: 작업의 진행량. - 숫자 값 입력. - max 속성을 생략할 경우 value 속성의 값은 0~1 사이의 숫자여야 함. - value 속성에 대한 값은 Javascript를 통해 작업하는 편임. 값이 가변하기 때문. - max 속성을 생략 시 value 속성 값은 0~1 사이의 값이어야 함.
-
[HTML] 양식(7) - select, datalist, optgroup, optionHTML 2020. 8. 30. 20:14
▶ , , , 옵션(, )의 선택 메뉴()나 자동완성()을 제공. - : 사용자에게 선택할 수 있는 옵션 제공. - : 제공된 옵션을 그룹화. - : 제공된 옵션은 셀렉트를 통해 사용자가 선택. - : 자동완성 기능으로써 제공. select { display: inline-block; } datalist { display: none; } optgroup, option { display: block; } ▶ 옵션을 선택하는 메뉴. 속성 autocomplete: 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부 설정. - on, off 값. 기본 값: on disabled: 선택 메뉴 자체를 선택할 수 없도록 비활성화. - boolean값. form: 선택 메뉴가 속할 하나 이상의 의 id..
-
[HTML] 양식(6) - fieldset, legendHTML 2020. 8. 30. 19:32
▶ , 같은 목적의 양식을 그룹화()하여 제목()을 지정. - 그룹화는 , 제목은 를 통해 지정. fieldset, legend { display: block; } - 은 같은 목적의 양식을 그룹화함. 속성 disabled: 그룹 내 모든 양식 요소를 비활성화. - boolean 값. form: 그룹이 속할 하나 이상의 의 id 속성 값. - 외부에서 연결해 사용 가능. - 의 범위 밖에서 특수하게 작동해야 하는 경우 외부에 위치한 채 연결해서 사용 가능하도록. name: 그룹의 이름.
-
[HTML] 양식(5) - textareaHTML 2020. 8. 30. 19:27
▶ 여러 줄의 일반 텍스트 양식을 작성할 때 사용. 한 줄의 경우 사용을 권장. 속성 autocomplete: 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부 설정. - on, off 값. 기본 값: on autofocus: 페이지가 로드될 때 자동으로 포커스. - boolean 값. - 문서 내에서 고유해야 함. disabled: 양식을 비활성화. - boolean 값. form: 의 id 속성 값 - 해당 의 후손이 아닐 경우만 해당. - 의 범위 밖에서 특수하게 작동해야 하는 경우 외부에 위치한 채 연결해서 사용 가능하도록. - 이 submit될 때 연결이 되어 있다면 이에 연결된 에 입력된 정보 또한 함께 제출됨. maxlength: 입력 가능한 최대 문자 수. - 숫자 값. ..
-
[HTML] 양식(3) - labelHTML 2020. 8. 30. 19:11
▶ 라벨 가능 요소(labelable)의 제목(Caption)을 지정. 라벨 가능 요소: , , , , for 속성으로 라벨 가능 요소를 참조하거나 콘텐츠로 포함. - for 속성: 참조할 라벨 가능 요소의 id 속성 값. - 라벨 가능 요소를 참조하거나 포함하는 경우 체크박스가 아닌 텍스트만 클릭해도 체크박스에 체크가 됨. label { display: inline; } - label이 를 포함하는 경우. - 이때 검색이라는 텍스트만 클릭해도 입력창에 focus가 잡힘.
-
[HTML] 양식(2) - inputHTML 2020. 8. 30. 19:04
▶ 사용자에게 입력 받을 데이터의 양식. 속성 autocomplete: 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지의 여부를 설정. - on, off 값 지정. 기본값: on. - cf. 에서 autocomplete 속성 설정 시 범위 내의 모든 데이터 양식에 설정되는 데 비해 의 경우 해당 요소 하나에 대해서만 설정됨. autofocus: 페이지가 load될 때 특정한 양식 부분에 자동으로 포커스 처리 여부 설정. - boolean값. - focus는 한 곳만 가능하기 때문에 문서 내 고유해야 함. checked: 양식이 선택되었음을 표시. - boolean값. - type 속성의 값이 radio, checkbox일 경우만 해당. readonly: 수정 불가한 읽기 전용 설정. - b..
-
[HTML] 양식(1) - formHTML 2020. 8. 27. 13:35
▶ 웹 서버에 정보를 제출하기 위한 양식의 범위를 정의. - 아이디와 비밀번호를 입력 및 로그인 상태를 유지할 것인지 여부를 체크하고 모든 입력이 끝났다는 의사 표시로 로그인 버튼을 클릭해 해당 정보를 브라우저에 전달함. - 화면에는 여러 양식이 존재하는데 은 이러한 입력 양식들을 wrapping함(입력 양식의 범위를 지정). - 이후 양식의 정보를 특정 페이지나 주소로 전송하는 데 사용됨. 은 다른 을 자식 요소로 포함할 수 없음. 속성 - action : 전송한 정보를 처리할 웹페이지의 URL을 명시. 은 사용자에게 정보를 입력 받고 그것을 다시 웹 서버로 제출함. 해당 정보가 제출될 페이지가 action의 URL. - autocomplete : 사용자가 이전에 입력했던 값으로 자동 완성 기능을 사용..