[React] 폼 제출 / Formstrap

작성한 내용을 제출하기 위한 Form

 

JSP를 사용할 때에도 form 태그를 이용해 작성한 내용을 제출하는 형식을 많이 사용했는데, 

reactstrap에도 Form이 존재한다

하지만 둘의 차이점은 존재하는데 그것은

Reactstrap의 Form 내에 존재하는 모든 Button은 type을 지정해주지 않아도 submit을 가지고 있다는 점이다

따라서, Form을 사용할 때에는 e.preventDefault()를 통한 제어가 필요함

 

 

[FormStrap.js]

import{Form, Label, Input, FormGroup, FormText, Button, Col} from 'reactstrap';

function FromStrap(){
    return(
        <>
        <Form style={{ width: "800px", margin: "10px auto" }}>
        
            {/* 이메일 입력 */}
            <FormGroup row> // (1)
                <Label for="examEmail" sm={2}>Email</Label> // (2)
                <Col sm={10}> // (3)
                    <Input type="email" name="email" id="examEmail" placeholder="email" />
                </Col>
            </FormGroup>

            {/* 비밀번호 입력 */}
            <FormGroup row>
                <Label for="examPassword" sm={2}>Password</Label>
                <Col sm={10}>
                    <Input type="password" name="password" id="examPasswordl" placeholder="password" />
                </Col>
            </FormGroup>
            <FormGroup row>
                <Label for="examSelect" sm={2}>Select</Label>
                <Col sm={10}>
                    <Input type="select" name="select" id="examSelect">
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                    </Input>
                </Col>
            </FormGroup>

            {/* textArea 입력 */}
            <FormGroup row>
                <Label for="examText" sm={2}>Text Area</Label>
                <Col sm={10}>
                    <Input type="textarea" name="text" id="examText" />
                </Col>
            </FormGroup>
            
            {/* file 입력 */}
            <FormGroup row>
                <Label for="examFile" sm={2}>File</Label>
                <Col sm={10}>
                    <Input type="file" name="file" id="examFile" />
                    <FormText color="muted">
                        This is some placeholder block-level help text for the above input.
                        It's a bit lighter and easily wraps to a new line.
                    </FormText>
                </Col>
            </FormGroup>

            {/* radio 버튼 입력 - 3개 중 한개*/}
            <FormGroup tag="fieldset">
                <legend> Radio Buttons </legend>
                <FormGroup check>
                    <Label check>
                        <Input type="radio" name="radio1" />{' '}
                        Option one is this and that-be sure to include wy it's great
                    </Label>
                </FormGroup>
                <FormGroup check>
                    <Label check>
                        <Input type="radio" name="radio1" />{' '}
                        Option two can be somthis else and selecting it will deselect option one
                    </Label>
                </FormGroup>
                <FormGroup check>
                    <Label check>
                        <Input type="radio" name="radio1" disabled />{' '}
                        Option three is disabledß
                    </Label>
                </FormGroup>
            </FormGroup>

            {/* 체크박스 입력 */}
            <FormGroup check>
                <Label check>
                    <Input type="checkbox" /> {' '}
                    check me out
                </Label>
            </FormGroup>
			
            // (4)
            <Button>Submit</Button>
        </Form>
        </>
    )
}

export default FromStrap;

 

(1) FormGroup : 입력받아야 하는 Input의 하나를 묶어서 나타내며, 다른 요소와 가로로 두고 싶다면 row 설정이 필요

(2), (3) sm={값}을 통해 비율 설정이 가능하며, 값은 최대 12로 설정이 가능함

 

(4) 기존 HTML/CSS에서의 form과는 달리 Form 컴포넌트 내에 포함된 모든 버튼은 submit이 되기 때문에, 버튼 클릭에 대한 이벤트를 e.preventDefault()를 통해 제어가 필요