[HTML5] 입력 양식과 관련된 태그

Programming Language/Javascript, ...

[HTML5] 입력 양식과 관련된 태그

Ma_Sand 2022. 4. 8. 15:30

<input> 태그

: 사용자에게 값을 입력받을 텍스트 상자나 체크박스 등을 만들 때 사용한다.

<body>
    아이디: <input type="text"><br><br>
    비밀번호: <input type="password"><br><br>
    성별: <input type="radio">남 <input type="radio">여<br><br>
    
    <!-- 버튼을 만드는 방법 두 가지 
         1. <button>
         2. <input type="submit/reset">
    -->
    <button>회원 가입</button>
    <input type="submit" value="회원 가입">
</body>

<input> 안에 입력할 때,

아이디를 입력하는 곳엔 'type="text"'로 작성한다.

비밀번호를 입력하는 곳엔 'type="password"'로 작성한다.

성별을 입력하는 곳엔 'type="radio"'로 작성한다. radio는 둥근 모양의 선택란이다.

입력받을 버튼은 'type="submit"'(제출) 또는 'type="reset"'(초기화)으로 작성한다. 버튼의 이름은 value로 지정해주면 되고, 지정하지 않으면 submit은 제출, reset은 초기화로 보여진다.

버튼은 <button> 태그로도 만들 수 있다. 이땐 <button>과 </button> 사이에 버튼의 이름을 지정하면 된다.

<form>, <fieldset> 태그

1) <form>

: <form> 태그 안에 있는 제출 버튼을 클릭했을 때, 해당 <form> 안에 작성된 사용자의 입력값들을 서버로

전달하여 요청한다.

- 속성값

· action: <form> 안에 있는 사용자의 입력값들을 전달하면서 요청할 서버의 경로를 제시한다.

· method: 요청을 전송하는 방식을 지정한다. 방식에는 get(기본값)과 post가 있다.

> get은 URL에 폼 데이터를 추가하여 서버로 전달하는 방식이며, 주로 조회할 때 사용한다.

> post는 폼 데이터를 별도로 첨부하여 서버로 전달하는 방식이며, 주로 값을 변경하거나 추가할 때

사용한다.

☞ <form> 태그 안에 있는 submit(제출) 버튼을 클릭했을 때, action에서 지정한 서버로 사용자의 입력값을

전달하되, method에 작성한 요청 전송 방식으로 key와 value를 함께 전달한다.

2) <fieldset>

: 그룹을 묶어준다.

<body>
    <fieldset>
        <form action="htmlTest" method="post">
            검색: <input type="text" name="keyword">
            <input type="submit" value="검색">
        </form>
    </fieldset>
    
    <fieldset>
        4+2=? <br>
        <input type="text">
    </fieldset>
</body>

<fieldset>으로 <form>을 감싸면 <form>에 대해 그룹을 묶는 테두리를 만들어준다. <fieldset> 안에 <form> 태그를 사용하여 action으로 요청할 서버의 경로를 제시하고 method로 요청 전송 방식을 지정한다. <input>에서 name은 key에 해당하며, value는 말그대로 value에 해당하므로 사용자가 값을 입력하면 key값과 value값이 함께 전달된다.

<legend> 태그

: 그룹에 제목을 붙여준다.

<body>
    <form action="htmlTest.do">
    <fieldset>
        <legend>제목1</legend>
        입력1: <input type="text"><br>
        입력2: <input type="text">
    </fieldset>
    </form>
</body>

<legend>를 사용하여 그룹에 제목을 붙여줄 때엔

<form> 태그를 바깥으로 뺀 후, <fieldset>을 작성하고 그 안에 <legend>로 제목을 붙여주어야 한다.

만약 <fieldset> 안에 <form> 태그를 작성하면 제목이 생성되지 않는다.

text와 관련된 input 태그의 타입

1) type="text"

: 한 줄 짜리 텍스트를 입력할 수 있는 텍스트 상자

* id: 해당 html 문서 내의 고유값을 뜻한다. 만약 같은 id가 여러 개 있으면 가장 먼저 선언된 id로 인식한다.

name: 해당 html 문서의 데이터를 <form>으로 전송할 때 그 안에 있는 값들을 꺼내올 key로 사용한다.

<body>
    <label for="inputId">아이디: </label>
    <input type="text" id="inputId" name="userId" placeholder="아이디를 입력하세요."
     maxlength="10" required>
</body>

<label for="아이디">: '아이디: '라는 문자열을 클릭했을 때 텍스트 박스가 반짝이면서 입력할 수 있게 해준다. <input>에서 지정한 id를 <label for>에 작성하면 된다.

placeholder: 해당 텍스트 박스에 대한 설명을 보여준다. 사용자가 값을 입력하는 순간 글자가 사라진다.

maxlength: 입력받을 값의 최대 길이를 설정한다.

required: <input>에 required을 설정하면 사용자가 해당 박스에 입력값을 넣지 않았을 때 입력하라는 창을 띄워준다.

2) type="search/url/email"

: 형태는 일반 텍스트 상자와 유사하나, 기능은 각각의 정보에 맞게 세분화되어 있다.

<body>
    검색: <input type="search" placeholder="검색어 입력"><br>
    홈페이지: <input type="url" value="http://"><br>
    이메일: <input type="email">
</body>

search는 검색, url은 홈페이지, email은 이메일의 기능을 한다.

<textarea> 태그

: 여러 줄을 입력할 수 있는 텍스트 상자를 만든다.

<body>
    <form action="htmlTest.do">
        <fieldset>
            <legend>글 작성</legend>
            글 제목: <input type="text" name="title" size="30"><br><br>
            글 내용: <textarea name="content" cols="30" rows="10" style="resize: none">
                     </textarea><br><br>
        </fieldset>
    </form>
</body>

글 제목은 한 줄 짜리 텍스트 상자로 만들고, 글 내용은 여러 줄로 입력할 수 있게 <textarea> 태그를 사용한다. 그리고 cols(가로)와 rows(세로)로 텍스트 상자의 크기를 조절할 수 있다. 또, 크기를 고정해놓지 않으면 화면창을 작게/크게 할 때마다 텍스트 상자의 크기도 같이 바뀐다. 그러므로 style로 resize를 none으로 설정(다시 사이즈 변경하는 것은 없다)하면 화면창의 크기가 달라져도 텍스트 상자의 크기는 그대로이다.

숫자와 관련된 input 태그의 타입

1) type="number"

: 숫자만 작성할 수 있는 텍스트 상자를 만들며, 여기에 스핀박스(위아래 화살표 버튼이 있는 박스)가 추가된다.

수량: <input type="number" name="count" min="0" max="100" step="1">

숫자는 최소(min) 0부터 최대(max) 100까지이고 1씩 증가/감소(step)한다.

2) type="range"

: 슬라이드바를 만들어서 숫자를 지정할 수 있다.

점수: <input type="range" name="score" min="0" max="100" step="2">

숫자는 최소(min) 0부터 최대(max) 100까지이고 2씩 증가/감소(step)한다.

날짜 및 시간과 관련된 input 태그의 타입

type="date/month/week/time/datetime=local"

date: <input type="date" name="dateIn"><br>
month: <input type="month" name="month"><br>
week: <input type="week" name="week"><br>
time: <input type="time" name="time"><br>
datetime: <input type="datetime-local" name="datetime-local">

date: 연, 월, 일을 입력받는다.

month: 연, 월을 입력받는다.

week: 연, 해당 연도의 n번째 주를 입력받는다.

time: 오전/오후 시간을 입력받는다.

datetime-local: 연, 월, 일, 시간을 입력받는다.

radio 버튼과 checkbox와 관련된 input 태그

1) type="radio"

: 제시된 여러 개의 값들 중 단 하나만 선택해야할 때 name 속성값이 같으면 한 그룹으로 묶인다.

<input type="radio" id="radioX" name="gender" value="X" checked>
<label for="radioX">선택 안함</label>

<input type="radio" id="radioM" name="gender" value="M">
<label for="radioM">남자</label>

<input type="radio" id="radioF" name="gender" value="F">
<label for="radioF">여자</label>

<input type="radio">외계인

<label>를 작성하여 버튼 이외에 문자열을 클릭해도 버튼이 체크되도록 한다. 그리고 '선택 안함'을 기본 설정해놓기 위해 checked를 추가해준다.

'외계인'에선 <label>을 작성하지 않았는데 이땐 문자열을 눌러도 버튼이 체크되지 않는다.

2) type="checkbox"

: 제시된 여러 개의 값들 중 여러 개를 선택할 수 있을 때 선택된 값들이 넘어간다.

이때 넘기려는 value값을 명시해야 한다.

취미:
<input type="checkbox" id="dancing" name="hobby" value="dancing">
<label for="dancing">춤추기</label>

<input type="checkbox" id="exercizing" name="hobby" value="exercizing">
<label for="exercizing">운동하기</label>

<input type="checkbox" id="singing" name="hobby" value="singing">
<label for="singing">노래부르기</label>

기타 input 태그의 타입

1) type="color"

: 색상을 선택할 수 있다.

색상 선택: <input type="color">

2) type="file"

: 첨부할 파일을 선택할 수 있다.

<input type="file">

3) type="hidden"

: 사용자에게 특정값을 노출시키지 않고 넘긴다.

<input type="hidden" name="hidden">

4) type="button/reset/submit"

: button은 평범한 버튼, reset은 초기화 버튼, submit은 제출 버튼이다.

<input type="button" value="버튼">
<input type="reset" value ="초기화">
<input type="submit" value="전송">

4-1) button type="submit/reset/button"

: <form> 태그 안에서 button 타입을 지정하지 않으면 submit(제출)로 설정된다.

<button type="submit">submit</button>
<button type="reset">reset</button>
<button type="button">button</button>

<button>original button</button> 
<!--버튼 타입을 지정하지 않아 submit 버튼이 되었다.-->

5) select 태그와 option 태그

: 사용자에게 입력받은 값이 아닌 개발자가 제시한 옵션들 중에서 선택하게 한다.

긱긱의 option에 value값을 명시했을 경우 value값이 전달되고, value값을 명시하지 않았을 경우 기본

option 태그의 content 영역(<> </>)의 값이 전달된다.

 지금 기분은?
<select name="feel" id="feel">
    <option value="vg">매우 좋음</option>
    <option value="g">좋음</option>
    <option value="ss">보통</option>
    <option value="nb">나쁘지 않음</option>
    <option value="b">나쁨</option>
</select>

5-1) detalist 태그

: 옵션들 중에 원하는 값이 없어도 해당 값을 직접 기술해서 넘길 수 있다.

<datalist id="howdoUfeel">
    <option value="vg">매우 좋음</option>
    <option value="g">좋음</option>
    <option value="ss">보통</option>
    <option value="nb">나쁘지 않음</option>
    <option value="b">나쁨</option>
</datalist>

저작자표시

현재글[HTML5] 입력 양식과 관련된 태그

the Rabbit_Sand, IT Blog 🍀