1<!-- O segundo valor estará selecionado inicialmente -->
2<select name="select">
3 <option value="valor1">Valor 1</option>
4 <option value="valor2" selected>Valor 2</option>
5 <option value="valor3">Valor 3</option>
6</select>
1<label for="cars">Choose a car:</label>
2
3<select id="cars">
4 <option value="volvo">Volvo</option>
5 <option value="saab">Saab</option>
6 <option value="mercedes">Mercedes</option>
7 <option value="audi">Audi</option>
8</select>
1<select class="form-control">
2 <option>1</option>
3 <option>2</option>
4 <option>3</option>
5 <option>4</option>
6 <option>5</option>
7</select>
1<html>
2 <head>
3 <title>Selection Inputs</title>
4 </head>
5 <body>
6 <form>
7 <label for="selector"> <!-- Can add label if want -->
8 <p>A "select" element allows users to input from a selection:</p>
9 <select id="selector"> <!-- Use "select" to create object -->
10 <option>Option 1</option> <!-- Add all applicable options -->
11 <option>Option 2</option>
12 <option selected>Option 3</option> <!-- add selected to change default from first option -->
13 <optgroup label="Group"> <!-- To create nested options for categories use "optgroup" -->
14 <option>Option 4</option>
15 <option>Option 5</option>
16 </select>
17 </label>
18 </form>
19 </body>
20</html>
1class FlavorForm extends React.Component {
2 constructor(props) {
3 super(props);
4 this.state = {value: 'coconut'};
5 this.handleChange = this.handleChange.bind(this);
6 this.handleSubmit = this.handleSubmit.bind(this);
7 }
8
9 handleChange(event) { this.setState({value: event.target.value}); }
10 handleSubmit(event) {
11 alert('Your favorite flavor is: ' + this.state.value);
12 event.preventDefault();
13 }
14
15 render() {
16 return (
17 <form onSubmit={this.handleSubmit}>
18 <label>
19 Pick your favorite flavor:
20 <select value={this.state.value} onChange={this.handleChange}> <option value="grapefruit">Grapefruit</option>
21 <option value="lime">Lime</option>
22 <option value="coconut">Coconut</option>
23 <option value="mango">Mango</option>
24 </select>
25 </label>
26 <input type="submit" value="Submit" />
27 </form>
28 );
29 }
30}
1<label for="cars">Choose a car:</label>
2<select name="cars" id="cars">
3 <optgroup label="Swedish Cars">
4 <option value="volvo">Volvo</option>
5 <option value="saab">Saab</option>
6 <option value="n/a" disabled>unavailable</option>
7 </optgroup>
8 <optgroup label="German Cars">
9 <option value="mercedes" selected>Mercedes</option>
10 <option value="audi">Audi</option>
11 </optgroup>
12</select>