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() { 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> ) }
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> ); }
Login with user name 'admin' and password 'Admin@123' </Form.Text> <Form.Group controlId='formBasicUsername'> <Form.Label>User name</Form.Label> <Form.Control type='text' name='userName' onChange={this.updateCredentials} /> </Form.Group> <Form.Group controlId='formBasicPassword'> <Form.Label>Password</Form.Label> <Form.Control type='password' name='password' autoComplete='off' onChange={this.updateCredentials} /> </Form.Group>
<Form> <Form.Row> <Form.Group as={Col} controlId="nameId"> <Form.Control onChange={handleChangeName} type="input" placeholder={messages.name} /> </Form.Group> <Form.Group as={Col} controlId="emailId"> <Form.Control onChange={handleChangeEmail} type="email" placeholder={messages.email} /> </Form.Group> </Form.Row> <Form.Group controlId="messageId"> <Form.Control onChange={handleChangeBody} as="textarea" rows="6" placeholder={messages.message} /> </Form.Group> <Button onClick={e => { e.preventDefault(); handleSubmitComment(slug, name, email, body) }} variant="primary" > {messages.submit}
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 Header = ({value, pending, onChange, onClick}) => ( <Form.Row> <button className="btn mb-3 mr-n2" type="button" disabled={pending} onClick={onClick}> <i className="fa fa-times" /> </button> <Form.Group as={Col}> <Form.Control name="name" placeholder="Name" type="text" required minLength="5" maxLength="32" value={value.name} onChange={onChange} /> </Form.Group> <Form.Group as={Col}> <Form.Control name="value" placeholder="Value" type="text" required maxLength="256" value={value.value} onChange={onChange} /> </Form.Group> </Form.Row> )
const Request = ({value, errors, onChange}) => ( <Form.Row> <Form.Group as={Col} controlId="method" className="col-4"> <Form.Label>Method</Form.Label> <Form.Control </Form.Control> <FieldError message={errors.method} /> </Form.Group> <Form.Group as={Col} controlId="uri"> <Form.Label>URI</Form.Label> <Form.Control onChange={onChange} /> <FieldError message={errors.uri} /> </Form.Group> </Form.Row>
<Card.Body> <Form onSubmit={this.handleSubmit}> <Form.Group controlId="formBasicEmail"> <h3>Register</h3> <hr></hr> We'll never share your email with anyone else. </Form.Text> </Form.Group> <Form.Group controlId="formBasicPassword"> <Form.Label>Password</Form.Label> <Form.Control onChange={this.handlePassword} /> </Form.Group>
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 > ) }