[HTML] tag - form

 

 

 

 

 

 

공부했던 내용을 정리하는 용도로 오류가 있을 수 있습니다.

 

 

 

 

 

 

 

 

 

 

 

 <form action="http://localhost/login.php" method="post">
        <p>아이디: <input type="text" name="id"></p>
        <p>비밀번호: <input type="password" name="pwd"></p>
        <p>주소: <input type="text" name="address"></p>
        <input type="submit">
</form>

 

 

 

• <form> : 사용자로부터 정보를 입력받은 정보를 서버로 넘겨줄 수 있게 하는 부모 태그, 입력받은 정보를 어디로 넘겨 줄 것 인지 경로를 설정할 수 있다. 

• <input> : 사용자로부터 정보를 입력받을 수 있게 하는 태그 

• <input type="text"> : 사용자로부터 문자정보를 입력받을 수 있는 태그 

• <input type="password"> : 사용자로부터 문자정보를 입력받되 비밀번호형식의 특수문자 ' ˙ ' 로 표시되어 몇글자인지 알 수 있지만 무슨 문자인지 알 수 없게 입력되는 태그 

• <input type="submit"> : 입력한 정보를 서비스로 넘어가서 서버로 전송 할 수 있게 해주는 버튼 태그 

• name : 각각의 컨트롤에 어떤 정보인지 이름을 부여할 수 있는 태그 속성 

 

 

 

 

 

 

 

 

<form action="">
     <p>text:<input type="text" name="id" value="default value"></p>
     <p>password: <input type="password" name="pwd" value="default value"></p>
     <p>textarea: <textarea name="text" cols="50" rows="2">default value</textarea></p>
     <input type="hidden" name="hide" value="hidden_text">
     <input type="button" value="버튼" onclick="alert('hello World')">
     <input type="reset" value="재설정">
     
</form>

 

 

 

• value : 사용자가 아무것도 입력하지 않아도 기본 입력값으로 미리 문자가 입력되어있게 하는 태그 속성 

• <textarea> :  한줄의 단어나 문장이 아닌 여러줄을 입력하고 싶을때 사용하는 태그, text 태그와 달리 value 속성을 쓰지 않고  태그 안쪽에 기본값을 입력해준다. 

• hidden : ui가 딱히 필요 없거나 몰래 서버쪽으로 데이터를 전송해야 할때 쓰는 input 태그의 타입 속성, 정보를 입력하는 사용자가 알지 못하는 정보를 사용자가 입력한 정보와 함께 서버로 넘겨줄 수 있다. 

• button : submit 과는 다르게 순수하게 button의 ui 만들어지는 input 태그의 타입 속성. 혼자서는 아무 역할도 하지 못하며 onclick 이라는 속성으로 javascript와 같은 프로그래밍 언어가 사용될 때 사용된다.   

• reset : 사용자가 입력했던 모든 정보가 초기화 되게하는 input 태그의 타입 속성

 

 

 

 

 

 

 

 

 

<form action="http://localhost/fruits.php">
        <h1>개수</h1>
        <p><select name="number">
                <option value="one">1</option>
                <option value="two">2</option>
                <option value="three">3</option>
            </select></p>

        <h1>과일</h1>
        <p><select name="fruits" multiple>
                <option value="apple">사과</option>
                <option value="grapes">포도</option>
                <option value="mango">망고</option>
            </select></p>
        <input type="submit">
 </form>

 

 

 

• <select> :  선택을 할 수 있는 부모 태그 

• <option> :  select의 자식태그, 콤보 박스의 선택지 태그

• value :  컴퓨터가 이해하기 쉽게 하는 정보를 설정하기 위해 사용하는 태그 속성, 클라이언트에게 보여주는 정보가 아닌 실제로 서버로 넘어갈 때 넘겨주는 정보 

• multiple : 여러개의 항목을 선택할 수 있게 하는 태크 속성, 속성값은 없다.  control 키를 누른채 클릭을 하면 여러개가 선택된다. 

 

 

 

 

 

 

 

 

 

 <form action="http://localhost/color.py">
        <h1>날씨</h1>
        <p>
            맑음: <input type="radio" name="whether" value="sunny">
            흐림: <input type="radio" name="whether" value="gloomy" checked>
            비옴: <input type="radio" name="whether" value="rain">
        </p>
  
        <h1>요일</h1>
        <p>
            월: <input type="checkbox" name="day" value="Monday">
            화: <input type="checkbox" name="day" value="Tuesday" checked>
            수: <input type="checkbox" name="day" value="Wednesday">
            목: <input type="checkbox" name="day" value="Thursday">
            금: <input type="checkbox" name="day" value="Friday"checked>
            토: <input type="checkbox" name="day" value="Saturday">
            일: <input type="checkbox" name="day" value="Sunday">
        </p>
        <input type="submit">
    </form>

 

 

 

• radio :  여러개의 라디오버튼 중 하나만 선택할 수 있게 만든 input 태그의 타입 속성. 다른 버튼을 선택하면 나머지의 버튼이 해제된다.

• checked : 사용자기 선택을 하기 전 미리 선택을 기본 입력값으로 설정하는 태그 속성 , 속성값은 따로 없다. 

• checkbox : 여러개의 버튼을 선택 할 수 있게 만든 input 태그의 타입 속성

 

 

 

 

 

 

 

 

 

<form action="http://localhost/label.py">
        <p><label for="id"> id:</label><input type="text" name="id" value="default value" id="id"></p>
        <p><label> password: <input type="password" name="pwd" value="default value"></label></p>
        <p><label> id 기억하기: <input type="checkbox" name="id_remember"></label></p>
</form>

 

 

 

• <label> : label 태그 사이의 텍스트가 무언가의 이름표 역할이라는 것을 알려주는 의미적인 태그. for 속성을 주고 id값을 입력해주서 어떤 태그의 이름표인지 알려주거나 태그 전체를 label 태그를 감싸줘서 사용한다.  사용자가 꼭 input 박스를 선택하지 않아도 label의 텍스트를 클릭하면 자동으로 해당 input 박스로 이동시켜준다. 더 넓은 영역을 클릭가능한 영역으로 만들 수 있게 해주는 장점이 있다. 

 

 

 

 

 

 

 

 

<form action="http://localhost/upload.php" method="POST" enctype="multipart/form-data">
        <input type="text" name="name">
        <input type="file" name="file">
        <input type="submit">
</form>

 

 

 

 

• method : 정보를 보낼때 어떠한 방식으로 보낼지 전송 방법의 type 정하는 속성.  지정하지 않으면 기본적으로 정보를 url로 전달하는 get 방식으로 전송된다. url과는 다른 방법으로 숨겨서 전달하는 방식은 post 방식이다..  어떻게 전달하느냐에 대한 방식을 정하는 것은 보통 서버쪽 엔지니어의 권한이다. 하지만 보통 form을 이용해 정보를 전송하면 거의 post방식으로 보낸다.

• file :  사용자가 파일을 선택하고 서버로 전송하여 서버쪽 컴퓨터에 저장할 수 있게 해주는  input 태그의 타입 속성. file 타입 속성을 사용하면 꼭 enctype="multipart/form-data" 속성도 함께 써주어야 한다.