[Html] 입력 양식 요소 - Form과 Input 속성

Form 요소의 속성

autocomplete 속성

• autocomplete 속성은 form이나 input 요소에 입력된 정보를 저장할지 안 할지를 명시한다.
• 속성값이 on으로 설정되면 브라우저는 사용자가 입력하는 정보를 자동으로 저장하고, 이후에 입력되는 입력값을 저장된 정보를 바탕으로 자동 완성해준다. 
• text, password, range, color, date, datetime-local, month, week, email, url, tel, search과 같은 input 타입에서만 사용할 수 있다.

<form action="/examples/media/request.php" autocomplete="on">
    이름 : <input type="text" name="name"><br>
    나이 : <input type="number" name="age" min="1" max="99" autocomplete="off"><br><br>
</form>

novalidate 속성

• novalidate 속성은 input 요소의 속성이 아닌 form 요소의 속성으로, 입력한 정보를 전송할 때 그 정보가 유효한지 아닌지를 검사하지 않았다는 것을 명시한다.
• url이나 email 타입과 같이 자동으로 유효성 검사를 하는 input 타입에 이 속성을 사용하면 유효성 검사를 하지 않는다.

<form action="/examples/media/request.php" novalidate>
    여러분이 자주 들리는 사이트의 URL 주소를 입력해 주세요 :<br><br>
    <input type="url" name="url">
</form>

 

Input 요소 속성

value 속성

• value 속성은 input 요소의 입력 필드에 나타나는 초깃값을 설정한다.

<form>
    이름 : <br><input type="text" name="student_name"><br>
    학번 : <br><input type="text" name="student_id"><br>
    학과 : <br><input type="text" name="department" value="컴퓨터공학과"><br>
</form>

readonly 속성

• readonly 속성은 사용자가 입력 필드를 볼 수는 있으나, 수정할 수는 없도록 설정한다.
• disabled 속성과는 다르게 전송 버튼을 누르면 초깃값이 서버로 전송된다.

<form>
    이름 : <br><input type="text" name="student_name"><br>
    학번 : <br><input type="text" name="student_id"><br>
    학과 : <br><input type="text" name="department" value="컴퓨터공학과" readonly><br>
</form>

disabled 속성

• disabled 속성이 설정된 입력 필드는 사용할 수도 없고, 클릭할 수도 없어 아예 사용할 수 없다.
• readonly 속성과는 달리 전송 버튼을 눌러도 초깃값이 서버로 전송되지 않는다.

<form>
    이름 : <br><input type="text" name="student_name"><br>
    학번 : <br><input type="text" name="student_id"><br>
    학과 : <br><input type="text" name="department" value="컴퓨터공학과" disabled><br>
</form>

maxlength 속성

• maxlength 속성은 입력 필드에 입력할 수 있는 문자의 최대 길이를 설정한다.

<form>
    이름 : <br><input type="text" name="student_name" value="홍길동" maxlength="10"><br>
    학번 : <br><input type="text" name="student_id"><br>
</form>

size 속성

• size 속성은 입력 필드에 보여지는 input 요소의 크기를 설정한다.
• maxlength 속성과는 달리 입력 필드가 한 번에 보여줄 수 있는 문자의 최대 개수만을 의미한다.

<form>
    이름 : <br><input type="text" name="student_name" value="홍길동" size="30"><br>
    학번 : <br><input type="text" name="student_id"><br>
</form>

autocomplete 속성

• autocomplete 속성은 form이나 input 요소에 입력된 정보를 저장할지 안 할지를 명시한다.
• 속성값이 on으로 설정되면 브라우저는 사용자가 입력하는 정보를 자동으로 저장하고, 이후에 입력되는 입력값을 저장된 정보를 바탕으로 자동 완성해준다.
• text, password, range, color, date, datetime-local, month, week, email, url, tel, search과 같은 input 타입에서만 사용할 수 있다.

<form action="/examples/media/request.php" autocomplete="on">
    이름 : <input type="text" name="name"><br>
    나이 : <input type="number" name="age" min="1" max="99" autocomplete="off"><br><br>
</form>

autofocus 속성

• autofocus 속성은 웹 페이지가 로드될 때, 속성이 적용된 input 요소에 자동으로 마우스 커서가 위치해서 포커스가 맞게 해준다.

<form action="/examples/media/request.php">
    사용자 : <input type="text" name="username"><br>
    비밀번호 : <input type="password" name="password" autofocus><br><br>
</form>

form 속성

• form 속성은 해당 input 요소의 위치에 상관없이 포함될 form 요소를 명시해준다.

<form action="/examples/media/request.php" id="user">
    사용자 : <input type="text" name="username"><br><br>
</form>
비밀번호 : <input type="password" name="password" form="user">

formaction 속성

• formaction 속성은 입력한 정보를 전송할 때 정보가 전달될 서버 측 파일을 명시하는데, 즉 form 요소의 action 속성을 덮어쓴다.
• 이 속성은 submit 타입과 image 타입에서만 사용할 수 있다.

<form action="/examples/media/request.php">
    사용자 : <input type="text" name="username"><br>
    비밀번호 : <input type="password" name="password"><br><br>
    <input type="submit" value="관리자 권한으로 전송" formaction="/examples/media/request_admin.php"><br>
</form>

formenctype 속성

• formenctype 속성은 입력한 정보를 전송할 때 암호화하는 방법을 명시하는데, 즉 form 요소의 enctype 속성을 덮어쓴다.
• formenctype 속성은 form 요소의 method 속성이 post일 때만 적용되며, submit 타입과 image 타입에서만 사용할 수 있다.

<form action="/examples/media/request_enctype.php" method="post">
    사용자 이름을 입력해주세요 : <input type="text" name="username"><br><br>
    <input type="submit" value="암호화하여 전송" formenctype="multipart/form-data"><br>
</form>

formmethod 속성

• formmethod 속성은 입력한 정보를 전송할 때 사용하는 http 메소드를 명시하는데, 즉 form 요소의 method 속성을 덮어쓴다.
• 이 속성은 submit 타입과 image 타입에서만 사용할 수 있다.

<form action="/examples/media/request.php" method="get">
    사용자 이름을 입력해주세요 : <input type="text" name="username"><br><br>
    <input type="submit" value="post 방식으로 전송" formmethod="post"><br>
</form>

formnovalidate 속성

• formnovalidate 속성은 입력한 정보를 전송할 때 그 정보가 유효한지 아닌지를 검사하지 않았다는 것을 명시하는데, 즉 form 요소의 novalidate 속성을 덮어쓴다.
• 이 속성은 오직 submit 타입에서만 사용할 수 있다.

<form action="/examples/media/request.php">
    여러분이 자주 들리는 사이트의 URL 주소를 입력해 주세요 : <input type="url" name="url"><br><br>
    <input type="submit" value="novalidate 방식으로 전송" formnovalidate><br>
</form>

formtarget 속성

• formtarget 속성은 입력한 정보를 전송한 후, 그 결과로 받은 응답 페이지를 어디에 출력할지를 명시하는데, 즉 form 요소의 target 속성을 덮어쓴다.
• 이 속성은 submit 타입과 image 타입에서만 사용할 수 있다.

<form action="/examples/media/request.php">
    사용자 이름을 입력해주세요 : <input type="text" name="username"><br><br>
    <input type="submit" value="응답 화면을 새창에 표시" formtarget="_blank"><br>
</form>

height와 width 속성

• <input>태그의 type 속성이 image일 경우에는 height 속성과 width 속성을 사용하여 이미지의 높이와 너비를 명시할 수 있습니다.
• 오직 image 타입에서만 사용할 수 있으며, 이미지를 클릭하면 클릭한 곳의 x좌표와 y좌표가 x와 y라는 이름으로 같이 전송된다.

<form action="/examples/media/request.php">
    사용자 : <input type="text" name="username"><br>
    비밀번호 : <input type="password" name="password" autofocus><br><br>
    <input type="image" src="/examples/images/img_penguin.png" alt="전송" height="26" width="26">
    그림을 클릭하시면 전송됩니다!
</form>

list 속성

• input 요소의 list 속성값이 datalist 요소의 id 속성값과 일치해야만 연결이 된다.

<form action="/examples/media/request.php">
    <input list="lectures" name="lecture">
        <datalist id="lectures">
            <option value="HTML">
            <option value="CSS">
        </datalist>
</form>

min과 max 속성

• min속성과 max 속성은 input 요소에 입력할 수 있는 최솟값과 최댓값을 명시한다.
• number, range, date, time, datetime-local, month, week과 같은 input 타입에서만 사용할 수 있다.

<form action="/examples/media/request.php">
    <input type="date" name="theday" min="1977-01-01" max="2020-12-31"><br><br>
    <input type="submit" value="전송">
</form>

multiple 속성

• multiple 속성은 사용자가 input 요소에 값을 두 개 이상 입력하는 것을 허용한다.
• 이 속성은 email 타입과 file 타입에서만 사용할 수 있다.

<form action="/examples/media/request.php">
    <input type="file" name="uploadfile" multiple><br><br>
    <input type="submit" value="전송">
</form>

pattern 속성

• pattern 속성은 input 요소에 입력된 값을 검사하기 위한 정규 표현식을 명시한다.
• text, password, email, tel, url 타입과 같은 input 타입에서만 사용할 수 있다.

<form action="/examples/media/request.php">
    <input type="email" name="email"
        pattern="[a-zA-Z0-9]+[@][a-zA-Z0-9]+[.]+[a-zA-Z]+[.]*[a-zA-Z]*" title="이메일 양식">
</form>

<!-- 
[a-zA-Z0-9] : 영문 소문자나 영문 대문자, 숫자 중 어느 것이라도 개수에 상관없이 나올 수 있음
[@] : '@' 문자만이 나와야 함
[.] : '.' 문자만이 나와야 함
[.]* : '.' 문자가 나와도 되고 나오지 않아도 됨
[a-zA-Z0-9]* : 영문 소문자나 영문 대문자, 숫자 중 어느 것이라도 개수에 상관없이 나와도 되고 나오지 않아도 됨
-->

placeholder 속성

• placeholder 속성은 input 요소에 입력되어야 할 값에 대한 힌트를 제공하는데, 힌트는 예시가 될 수도 있고 입력 형식에 대한 설명이 될 수도 있다.
• placeholder 속성값은 해당 입력 필드에 포커스가 오게 되면 더 이상 표시되지 않는다.
• text, password, email, tel, url, search과 같은 input 타입에서만 사용할 수 있다.

<form action="/examples/media/request.php">
    사용자 : <input type="text" name="username" placeholder="홍길동"><br>
    비밀번호 : <input type="password" name="password" placeholder="1234"><br><br>
</form>

required 속성

• required 속성은 반드시 입력되어야 할 필수 input 요소를 명시하는데, 이 속성이 설정된 모든 input 요소에 입력값이 존재해야만 서버로 전송할 수 있다.

<form action="/examples/media/request.php">
    이름 : <input type="text" name="name" required> (이름은 반드시 입력해야 해요!)<br>
    나이 : <input type="number" name="age" min="1" max="99"><br><br>
</form>

step 속성

• step 속성은 input 요소에 입력할 수 있도록 허용된 숫자 간격을 명시하는데, step 속성값이 2이면 입력이 허용되는 숫자는 ..., -4, -2, 0, 2, 4,... 가 된다.
• number, range, date, time, datetime-local, month, week과 같은 input 타입에서만 사용할 수 있다.

<form action="/examples/media/request.php">
    여러분이 가장 좋아하는 숫자는 몇인가요? (단, -30부터 30사이에서 5단위로 골라주세요!)<br><br>
    <input type="number" name="favnum" min="-30" max="30" step="5"><br><br>
</form>

spellcheck 속성

• 입력값의 오타를 검사한다.

spellcheck

 

Reference

• http://www.tcpschool.com/
• https://poiemaweb.com/