render() { return( <div className="FormRow"> <Form.Label htmlFor={this.props.id} className="FormRowLabel"> {this.props.label} </Form.Label> <Form.Control className="FormRowInput" id={this.props.id} type={this.props.type} min={this.props.min} placeholder={this.props.placeholder} required={this.props.required} autoComplete={this.props.autoComplete} value={this.props.value} onChange={this.props.onChange} /> </div> ); }
renderForm() { const { newComment: { comment } } = this.state; return ( <Row> <Col md={6}> <Form onSubmit={this.handleSubmit}> <Form.Group controlId="comment"> <Form.Label>Comment</Form.Label> <Form.Control as="textarea" rows="3" name="comment" value={comment} onChange={this.handleChange} /> </Form.Group> <div className="btn-toolbar"> <Button type="submit">Submit</Button> <Button variant="link" onClick={this.hideForm}>Cancel</Button> </div> </Form> </Col> </Row> ); }
render() { const { title } = this.props; const { post } = this.state; return ( <Card> <Card.Header as="h5">{title}</Card.Header> <Card.Body> <Form onSubmit={this.handleSubmit}> <Form.Group controlId="title"> <Form.Label>Title</Form.Label> <Form.Control as="input" name="title" value={post.title} onChange={this.handleChange} autoFocus /> </Form.Group> <Form.Group controlId="body"> <Form.Label>Body</Form.Label> <Form.Control as="textarea" rows="5" name="body" value={post.body} onChange={this.handleChange} /> </Form.Group> <div className="btn-toolbar"> <Button variant="primary" type="submit">Save</Button> <Button variant="link" onClick={this.goBack}>Cancel</Button> </div> </Form> </Card.Body> </Card> ); }
render() { return ( <div> <h1>Contact Form</h1> <Form> <Form.Group controlId="formBasicName"> <Form.Label>Your Name</Form.Label> <Form.Control onChange={this.handleNameChange} placeholder="Your name..." /> <Form.Text className="text-muted"> We'll never share your data with anyone else. </Form.Text> </Form.Group> <Form.Group controlId="formBasicSubject"> <Form.Label>Your Subject</Form.Label> <Form.Control onChange={this.handleSubjectChange} placeholder="Your subject..." /> </Form.Group> <Form.Group controlId="exampleForm.ControlTextarea1"> <Form.Label>Your Message</Form.Label> <Form.Control onChange={this.handleMessageChange} as="textarea" rows="3" placeholder="Your Message..."/> </Form.Group> <Button onClick={this.handleClick} variant="primary" type="submit">Submit</Button> </Form> </div> ) }
</Form.Text> <Form.Group controlId='formBasicUsername'> <Form.Label>User name</Form.Label> <Form.Control type='text' name='userName' onChange={this.updateCredentials} /> </Form.Group> <Form.Label>Password</Form.Label> <Form.Control type='password' name='password' autoComplete='off' onChange={this.updateCredentials} /> </Form.Group>
function Step1(props) { if (props.currentStep !== 1) { return null } return( <Form.Row className="modal__row"> <Form.Group as={Col} className="modal__group"> <Form.Label htmlFor="email" className="modal__label" > Registered-Email address </Form.Label> <Form.Control id="email" name="email" type="text" placeholder="abc@gmail.com" value={props.email} onChange={props.onChange} /> </Form.Group> </Form.Row> ); }
const RetryPolicy = ({value, errors, onChange}) => ( <Form.Row> <Form.Group as={Col} controlId="retryCount"> <Form.Label>Retry Count</Form.Label> <Form.Control name="retryCount" </Form.Group> <Form.Group as={Col} controlId="retryInterval"> <Form.Label>Interval</Form.Label> <Form.Control name="retryInterval" </Form.Group> <Form.Group as={Col} controlId="deadline"> <Form.Label>Deadline</Form.Label> <Form.Control name="deadline"
render() { const formStyle = { marginTop: '5%' }; return ( <Form style={formStyle}> <Form.Row> <Form.Group as={Col} md="12"> <Form.Label>Receiver TC</Form.Label> <Form.Control type="text" placeholder="Receiver TC" onChange={this.handleTcNoChange} value={this.state.tcno} maxLength="11" /> </Form.Group> </Form.Row> <Form.Row> <Form.Group as={Col} md="2"> <Form.Label>Currency</Form.Label> <CurrencyDropdown onDropdownChanged={this.handleCurrencyChange} /> </Form.Group> <Form.Group as={Col} md="10"> <Form.Label>Amount</Form.Label> <Form.Control type="text" placeholder="Amount" onChange={this.handleAmountChange} value={this.state.amount} maxLength="8" /> </Form.Group> </Form.Row> <Form.Row className="justify-content-end"> <Button variant="primary" size="lg" onClick={this.handleClick} disabled={this.state.isProcessingTransfer}>Transfer</Button> </Form.Row> </Form> ) }
render(){ return( <Container> <h1 className="text-center">contact us</h1> <Form> <Form.Group controlId="formBasicEmail"> <Form.Label>email adress</Form.Label> <Form.Control type="email" placeholder="Enter email" /> <Form.Text> we will never share your email to someone else </Form.Text> </Form.Group> <Form.Group controlId="formBasicPassword"> <Form.Label>Example taxtarea</Form.Label> <Form.Control as="textarea" rows="3" /> </Form.Group> <Form.Group controlId="formBasicCheckBox"> <Form.Check type="checkbox" label="Check me out" /> </Form.Group> <Button variant="primary" type="submit">Submit</Button> </Form> </Container > ) }