HTML表单开发：单选按钮与控件详解
需积分: 9 124 浏览量
更新于2024-08-22
收藏 2.24MB PPT 举报
本文主要介绍了HTML中的单选按钮及其在Web基础开发中的应用。单选按钮是HTML表单控件的一种，用于让访问者在一组选项中选择一项。它们通过`<input>`元素实现，其中`type`属性设置为`"radio"`，并且所有具有相同`name`属性的单选按钮组成一个单选按钮组。每个单选按钮都有一个`value`属性，表示用户选择的值，在提交表单时，浏览器会发送选中项的`name`和对应的`value`。
`<input type="radio" name="gender" value="male"/>`和`<input type="radio" name="gender" value="female"/>`是一个性别选择的例子，用户只能选择其中一个。`name`属性确保了浏览器在处理多个单选按钮时能识别出用户的选择。
表单在HTML中扮演着关键角色，它允许用户与服务器进行交互。通过`<form>`标记，开发者可以定义表单的范围，包括表单动作(`action`)，即数据提交的目的地，以及提交方式(`method`)，通常为`"post"`或`"get"`。例如：
```html
<form action="http://localhost:8080/MyApp/1.jsp" method="post">
用户名：<input type="text" name="userName" /><br/>
年龄：<input type="text" name="age" /><br/>
<input type="submit" />
</form>
```
`<input>`标记是最基本的表单控件之一，根据`type`的不同，它可以转换为各种类型的输入，如文本框、密码框、复选框等。其他常用的表单控件还有`<select>`（下拉列表）和`<textarea>`（多行文本输入框），这些元素同样嵌套在`<form>`内，共同构建完整的用户交互体验。
理解这些基础知识对于前端开发者来说至关重要，因为它们是构建用户友好的Web应用程序的基础组件。通过合理设计和使用表单和单选按钮，开发者能够有效地收集用户信息，实现客户端和服务器之间的数据交换。
433 浏览量
2012-10-12 上传
2022-08-03 上传
2024-10-13 上传
296 浏览量
小小记事本
<input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务" class="new-todo"></input> - {{ index+1 }}. <label>{{ item }}</label> <button class="destroy" @click="remove(index)"></button>
实现记事本的增，添，查改
小小记事本
<input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务" class="new-todo"></input>- {{ index+1 }}. <label>{{ item }}</label> <button class="destroy" @click="remove(index)"></button>
187 浏览量
| {{n.riskSourceNumber}} | {{n.status}} | <input type="checkbox" :aria-checked="false" :id="'status'+index" v-model="n.checked" class="form-check-input form-check-input-lg pointer mt-0"> |
2023-06-08 上传
156 浏览量
154 浏览量
通讯录
<button class="add-btn">添加联系人</button> <input type="text" id="search-input" placeholder="搜索姓名或电话">
| 姓名 | 电话 | 邮箱 | 操作 |
|---|
× <form>
<label for="name">姓名</label> <input type="text" id="name" name="name" required>
<label for="phone">电话</label> <input type="text" id="phone" name="phone" required>
<label for="email">邮箱</label> <input type="text" id="email" name="email" required>
<button id="save-btn">保存</button> <button id="cancel-btn">取消</button> </form> 112 浏览量
深井冰323
- 粉丝: 24
- 资源: 2万+
我的内容管理
展开
最新资源
- 通用3C电商网站左侧弹出菜单导航
- 的github
- 智睿企业视频版网站系统 v4.6.0
- 根据vo生成yapi文档：YapiFileGenerattor.zip
- install.zip
- CodeSoft 条形码标签打印开发指南
- GPT-too-AMR2text:复制“ GPT太”的代码
- counterspell:反咒诅咒的 Chrome 扩展
- CodingTestPractice
- 点文件
- 企业文化竞争（6个文件）
- pytorch-pruning.zip
- 天猫左侧导航菜单分类列表
- torch_sparse-0.6.1-cp36-cp36m-win_amd64whl.zip
- SiamSE:“比例等方差可改善连体跟踪”的代码
- BakedModpack：冒雨风险的modpack 2
