Sementic 요소로서의 <form>태그의 특징을 살펴보고 그 안에

요소(input, button)들을 사용했을 때 자동새로고침이 발생하는 문제를 해결해보자. 더 나아가 <form>요소의 종류에 대해서도 추가로 정리해보았다.

오늘도 사고뭉치

1. 문제점

: form에서 버튼을 누르거나 엔터을 통해 입력을 할 경우 계속해서 페이지를 불러왔다. submit속성을 주거나 action을 정의하지 않았는데,, react의 렌더링도 무시한채,,

2. 원인

HTML 폼 엘리먼트는 폼 엘리먼트 자체가 내부 상태를 가지기 때문에, React의 다른 DOM 엘리먼트와 조금 다르게 동작한다. form 태그 안에 있는 button은 submit 동작을 하는 것이였다.

3. 해결방안

1) button에 type attribute에 button 으로 주는 방법입니다.
``` ````
//하지만 난 이미 이렇게 타입을 버튼으로 줬음에도 새로고침이 일어나는 상황이었다

2) form에 onsubmit attribute에 return false 를 주는 방법입니다.

handleSubmit = e => {
  e.preventDefault();
};

render() {
  return (
    <form className="count-btn" onSubmit={this.handleSubmit}>
      <button onClick={this.handleDecrease} type="button">
        <i class="fas fa-minus"></i>
      </button>
      <input type="text" value={this.state.number}></input>
      <button onClick={this.handleIncrease} type="button">
        <i class="fas fa-plus"></i>
      </button>
      <span></span>
    </form>
  );
}

4. 결론

1초만에 1만 보여주고 새로고침되던 현상을 해결했다. 뿌듯.

출처: https://0taeng.tistory.com/17 [개발자 령탱]

TIL

HTML <form>요소

1. 의의

HTML <form> 요소는 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획을 나타낸다.

2. 특성

1)accept-charset
스페이스로 구분한, 서버가 허용하는 문자 인코딩의 목록. 브라우저는 목록을 순서대로 사용. 기본값은 페이지 인코딩과 같음.
2) action:양식 데이터를 처리할 프로그램의 URI.
:: <button>, <input type="submit"> , <input type="image"> 요소의 formaction 특성으로 재정의할 수 있다.

3) method
:양식을 제출할 때 사용할 HTTP 메서드.
-post: POST 메서드. 양식 데이터를 요청 본문으로 전송합니다.
-get: GET 메서드. 양식 데이터를 action URL과 ? 구분자 뒤에 이어 붙여서 전송합니다.
-dialog: 양식이 <dialog> 안에 위치한 경우, 제출과 함께 대화 상자를 닫습니다.

4) target
양식 제출의 결과를 표시할 위치를 나타내는 표준 키워드 혹은 사용자 지정 이름. 가능한 값은 브라우징 맥락(탭, 창,

3. 유형

1) 텍스트: <input type="text">
2) 비밀번호: <input type="password">
3) 체크상자: <input type="checkbox">
4) 라디오버튼: <input type="radio">
5) 입력상자: <textarea id="입력상자" rows="입력상자 행의 수" cols="입력상자 열의 수">
6) 목록상자: ``` 선택 목록 1 7) 명령버튼: `````` 8) 제출 또는 취소버튼 : ``` || ``` 9) 이미지버튼: `````` 10) 파일 업로드: `````` ## Semantic Tag로서의`````` 이전 블로그 내용에서 말했듯이 시맨틱(Semantic)은 "의미의, 의미론적인"이라는 뜻이다. 즉, HTML5에 도입된 시맨틱 태그는 개발자와 브라우저에게 의미있는 태그를 제공하게 된다. 일반적으로 ```