HTML 양식 그밖의 양식요소

    2018-03-10 12:55:21 작성

    <textarea>

    <textarea> 요소는 여러 줄의 입력 필드 입니다.
    value 속성이 없고 폼 제출시 <textarea>요소 내의 텍스트 콘텐츠를 전송합니다. 

    <textarea name="mytext" rows="5" cols="30"></textarea>
    <textarea> 태그의 속성
    속성 설명
    autofocus, disabled, form, maxlength, name, placeholder, readonly, required 속성은 input과 동일함
    cols 텍스트 영역의 너비(글자수)를 지정합니다.
    rows 텍스트 영역의 높이(라인수)를 지정합니다.
    wrap
    • soft : (기본값) 자동으로 줄바꿈이 포함하지 않습니다.
    • hard : 전송될때 자동으로 줄바꿈을 포함합니다.
      (cols 속성이 반드시 지정되어야 합니다.)

    <button>

    <button> 태그는 클릭 가능한 요소를 만듭니다.
    type에 따라 <input> 요소와 동일하게 동작합니다.
    value 속성은 서버에 전송되는 값으로만 의미가 있습니다.

    <button type="button" onclick="alert('Hello World!')">Click Me!</button>
    <button> 태그의 속성
    속성 설명
    type input의 속성과 같은 동작을 합니다.
    button, reset, submit

    항상 type을 명시하십시오. 브라우저마다 기본값이 다를수 있습니다.
    autofocus, disabled, form, formaction, formenctype, formmethod, formnovalidate, formtarget, name, value 속성은 input과 동일함

    <output>

    <output> 요소는 계산 결과(스크립트에 수행된 것)를 나타냅니다.
    <output> 요소는 value 속성이 없으므로 폼 제출시 값이 전송되지 않습니다.
    <form> 요소의 input 이벤트에서 작동합니다. 

    <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  0 <input type="range" id="a" value="50"> 100
  + <input type="number" id="b" value="50">
  = <output name="x" for="a b"></output>
</form>
    0 100 + =
    <output> 요소의 속성
    속성 값 설명
    for 요소의 id 계산 결과와 계산에 사용된 요소 사이의 관계를 지정합니다.
    여러 요소를 지정하려면 공백으로 구분하세요.
    name 이름 요소의 이름을 지정합니다.
    요소를 참조하는데 사용됩니다.
    form 폼요소의 id 폼요소 밖에서 사용되는 경우 form 요소의 id를 지정합니다.

    <fieldset>

    <fieldset> 요소는 관련된 데이터를 그룹화 합니다.
    <legend> 요소로 <fieldset> 요소의 캡션을 정의할 수 있습니다.

    <label>

    <label> 요소는 <input> 요소의 레이블을 정의합니다.
    사용자가 <label> 요소의 콘텐츠를 클릭하면 컨트롤을 토글하므로 사용자의 마우스 유용성이 향상됩니다.

    <label> 요소의 속성
    속성 값 설명
    for 요소의 id 관련된 <input> 요소의 id를 지정합니다.

    for 속성을 사용하여 요소를 지정하거나 <label> 요소안에 배치합니다.