HTML 주요 태그 정리_2
HTML 주요 태그 정리 -2
이번에는 <form> 태그에 대해서 알아보겠습니다. form은 <body>안에 사용하는 태그로 사용자가 웹사이트로 정보를 보낼 수 있는 요소들은 모두 form이라고 할 수 있습니다. 속성을 이용해서 사용자가 입력한 데이터를 어떤 방식으로 서버에 넘길지 어떤 프로그램을 사용하여 처리하는 지를 정할 수 있습니다. 그럼 form과 같이 사용하는 속성에 대해 알아보겠습니다.
action 속성 : form이 전송되는 서버 url 즉, 주소를 지정하는 속성입니다.
name 속성 : form의 이름으로 서버로 제출된 form데이터를 참조하거나 form요소를 참조하기 위해서 사용됩니다.
method 속성 : 말 그대로 전송방법을 설정하는 속성입니다.
다음으로 <form>태그 하위에 같이 사용되는 태그들을 알아보겠습니다.
내용을 입력하는 <textarea></textarea> 태그는 여러줄의 글을 입력할 때 사용한 태그입니다. 속성값으로 rows와 cols를 사용하여 너비를 조정할 수 있습니다.
이런식으로 글씨를 입력하는 입력창을 생성할 수 있습니다.
다음으로 가장 많이 사용되는 <input>태그에 대해 알아보겠습니다. <input>태그는 여러 속성을 사용하여 서버로 전송하는 형식과 이름을 지정하게됩니다. 사용되는 속성으로는 name, type등이 있습니다.
name속성 : 서버로 전송되는 데이터의 이름을 정해줍니다.
type속성 : 입력 형식을 지정합니다.
예를들어 <input>태그는 회원가입을 할 때 사용할 수 있습니다.
아이디 입력 : <input type="text" name="id" size = "10"> <br>
비밀번호 입력 : <input type="password" name="pw" size="10"> <br>
이런식으로 작성해주게 되면, 아이디 입력부터 살펴보게 되면, type은 text형식이며 서버에 보낼 때 데이터의 이름은 id로 설정한 것을 알 수 있습니다. size는 위에 설명은 안했지만 말 그대로 크기를 지정해준다고 생각하면 됩니다. 비밀번호 입력을 살펴보면 type이 아이디입력과는 다르게 password로 되어있는 것을 알 수 있는데 password 형식은 입력했을때 ●이런 형식으로 나와 입력한 비밀번호를 문자그대로가 아닌 저렇게 암호화되어 나오는 것을 알 수 있습니다. 서버로 보낼 때 이름은 pw로 설정한 것을 알 수 있습니다.
다음으로는 더 다양한 type을 알아보겠습니다. 먼저 아래의 코드를 보겠습니다.
<input type="submit" value="회원가입 완료"><br>
<input type="reset" value="초기화버튼입니다 조심">
위에 코드의 type은 submit으로 서버로 데이터를 전송하는 제출버튼입니다. 어떤 서버로 제출하는지에 대해서는 위에 설명한 form태그 속성인 action속성값으로 지정한 서버 주소로 보내게 됩니다. value는 버튼에 나타낼 텍스트를 입력해줍니다. reset type은 입력한 모든 창을 초기화 해주는 속성을 가지고 있습니다.
이런식으로 버튼이 생기게 됩니다.
버튼에 대해 더 알아보도록 하겠습니다. 대표적으로 체크박스 버튼, 라디오 버튼, 드롭다운 버튼이 있습니다. 체크박스 버튼은 다중 선택이 가능하고 라디오버튼은 단일 선택입니다. 드롭다운 버튼은 선택형버튼이라고 생각하시면 됩니다. 그 전에
<label></label>태그를 소개해드리겠습니다. <label>태그는 for 속성을 사용하여 다른 요소와 결합이 가능하며 결한 요소와 id값이 같으면 입력창을 선택하지 않고 텍스트부분만 손택해도 입력창으로 커서를 이동할 수 있습니다. 말이 어려운데 쉽게 이야기 하면 <label>로 텍스트를 감싸고 for속성으로 속성값을 정해주고 <input>태그에 id속성을 이용해서 속성값을 정해줍니다. 그리고 for의 속성값과 id속성값을 같게 설정해주면 된다는 뜻인데 예시로 좀더 자세히 보겠습니다.
<label for="user_name">이름 입력 : </label>
<input type="text" id="user_name" size="10">
위 두 코드를 보면 for과 id속성값을 "user_name"으로 같게 설정해주었습니다.
그럼 위와같은 결과화면을 볼 수 있을텐데 그럼 옆의 입력창을 직접누르지 않고도 이름 입력이라는 텍스트를 눌러도 입력창에 커서가 깜빡이는 것을 확인할 수 있습니다. 이런 <label>태그는 버튼에서 사용하면 유용할꺼 같아서 이렇게 버튼설명 전에 정리했습니다.
그럼 먼제 체크박스 버튼에 대해서 알아보겠습니다 .
<input type="checkbox" name="code" value="java">Java <br>
<input type="checkbox" name="code" value="python">Python <br>
<input type="checkbox" name="code" value="react">React <br>
<input type="submit" value="전송">
type의 속성으로 checkbox를 주게 되면 아래와 같은 결과화면을 얻을 수 있습니다.
버튼 이름은 value의 속성값으로 지정했으며, 다중 선택이 가능함을 확인할 수 있습니다. 다음으로는 라디오 버튼을 알아보겠습니다.
<input type="radio" name="code" value= "Java"> 자바 <br>
<input type="radio" name="code" value= "Python"> 파이썬 <br>
<input type="radio" name="code" value= "JSP"> jsp <br>
단일 선택이 되는것을 확인할 수 있습니다. 마지막으로 드롭다운 버튼을 확인하겠습니다.
<select>
<option value = "Java">자바</option>
<option value = "Python">파이썬</option>
<option value = "JSP">jsp</option>
</select>
드롭다운 버튼은 <option></option>태그를 이용하여 사용할 수 있습니다. 이 처럼 작성하면 아래로 목록이 펼쳐지면서 목록을 선택할 수 있습니다. 단, 역기서의 value값은 서버로 넘길 값을 지정하는 것입니다. 또한 <option>태그 사용을 위해서는 상위 태그로 <select>태그를 사용하여 감싸줘야 합니다.
추가적으로 버튼이나 입력창 또는 input으로 값을 입력 받을때 사용하면 유용한 속성 placeholder에 대해 알아보겠습니다, placeholder은 처음에 어떤식으로 입력하라는 식의 가이드식으로 입력창에 표기하는 용도로 사용됩니다 . 하지만 어떤 값도 아니고 입력을 하면 지워지는 것을 확인할 수 있습니다.
<input type="text" placeholder = "이름을 입력하세요." id="user_name" size="30" /> <br>
가이드를 위해 사용하면 사용자들이 편하게 이용할 수 있는 속성인거 같습니다.
이상으로 HTML에서 자주사용 태그들을 정리 해보았습니다. 다음에는 간단하게 CSS에 대해 배운것을 정리해보겠습니다.
※제가 공부하면서 참고할려고 만든 블로그라 많이 미숙합니다. 혹시 제가 놓친부분이나 수정할 부분 댓글 남겨주시면 반영하겠습니다. 감사합니다.
댓글을 작성해보세요.