制作bootshape表单,其中包括单选框,复选框,输入框,下拉菜单,提交按钮
时间: 2024-03-16 17:42:05 浏览: 97
文本框 单选框 复选框 下拉框
以下是一个包含单选框,复选框,输入框,下拉菜单和提交按钮的 Bootshape 表单的示例代码:
```html
<form>
<div class="form-group">
<label for="nameInput">Name</label>
<input type="text" class="form-control" id="nameInput" placeholder="Enter your name">
</div>
<div class="form-group">
<label for="emailInput">Email address</label>
<input type="email" class="form-control" id="emailInput" placeholder="Enter your email address">
</div>
<div class="form-group">
<label for="genderInput">Gender</label>
<div class="form-check">
<input class="form-check-input" type="radio" name="genderInput" id="maleRadio" value="male">
<label class="form-check-label" for="maleRadio">
Male
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="genderInput" id="femaleRadio" value="female">
<label class="form-check-label" for="femaleRadio">
Female
</label>
</div>
</div>
<div class="form-group">
<label for="interestsInput">Interests</label>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="music" id="musicCheckbox">
<label class="form-check-label" for="musicCheckbox">
Music
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="sports" id="sportsCheckbox">
<label class="form-check-label" for="sportsCheckbox">
Sports
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="movies" id="moviesCheckbox">
<label class="form-check-label" for="moviesCheckbox">
Movies
</label>
</div>
</div>
<div class="form-group">
<label for="citySelect">City</label>
<select class="form-control" id="citySelect">
<option>New York</option>
<option>Los Angeles</option>
<option>Chicago</option>
<option>Houston</option>
<option>Philadelphia</option>
</select>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
```
这个表单包括五个输入字段:姓名,电子邮件地址,性别(单选框),兴趣爱好(复选框),城市(下拉菜单)。每个输入字段都有一个相应的标签和占位符文本。表单中还有一个提交按钮。这个表单的样式使用了 Bootstrap 的默认样式。
阅读全文