HTML form 表单组合功能使用

简介: HTML form 表单组合功能使用

```


分组信息

<!-- 文本输入框 -->
用户名:<input type="text" maxlength="6"  name="username" value="大前端">
<br>
<br>
   <!-- 密码输入框 -->
   密码:<input type="password" name="pwd">
<br>
<br>
   <!-- 单选框 -->
   <input type="radio" name="gender" checked="checked">男
   <input type="radio" name="gender">女
   <br><br>
   <!-- 下拉列表 -->
   省(市): <select>
                <option>河北</option>
                <option>山西</option>
                <option>山东</option>
                <option selected="selected">北京</option>
            </select>
            <!-- 下拉列表多选 -->
            <select multiple="multiple">
                <option>河北</option>
                <option>山西</option>
                <option>山东</option>
                <option selected="selected">北京</option>
            </select>
    市(区):<select>
          <!-- 下拉列表信息分组 -->
            <optgroup label="北京市">
            <option>昌平区</option>
            <option>海淀区</option>
            <option>朝阳区</option>
            <option>大兴区</option>
            </optgroup>
            <optgroup label="广州市">
            <option>昌平区</option>
            <option>海淀区</option>
            <option>朝阳区</option>
            <option>大兴区</option>
            </optgroup>
           </select>
           <br><br>
           <!-- 多选框 -->
           <input type="checkbox" checked="checked">喝酒
           <input type="checkbox" checked="checked">抽烟
           <input type="checkbox" checked="checked">烫头
           <!-- 多行文本框 -->
           <textarea cols="130" rows="10"></textarea><br><br>
           <!-- 文件上传控件 -->
           <input type="file">
            <br><br>
            <!-- 文件提交按钮 -->
           <!-- <input type="submit"> -->
            <!-- 普通按钮 -->
           <!-- <input type="button" value="普通按钮"> -->
           <!-- 图片按钮 -->
           <input type="image" src="按钮.jpg">
           <!-- 重置按钮 -->
           <input type="reset">
           </fieldset>
</form>


```


demo 效果:



相关文章
|
2月前
|
移动开发 前端开发 JavaScript
解锁HTML5表单:构筑网页完美交互的基石
解锁HTML5表单:构筑网页完美交互的基石
|
4天前
|
前端开发
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
这篇文章详细介绍了如何在HTML和CSS中设置背景、设计表格、创建表单以及使用框架集,并通过代码示例和测试结果展示了具体的实现方法和效果。
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
|
1月前
|
自然语言处理 开发者 Python
Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档,然后转换成格式丰富的 HTML 内容。Markdown 的语法简洁明了、学习容易,而且功能比纯文本更强。
Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档,然后转换成格式丰富的 HTML 内容。Markdown 的语法简洁明了、学习容易,而且功能比纯文本更强。
|
2月前
|
数据采集 JavaScript 前端开发
HTML表单深度解析:构建互动的网页界面
HTML表单深度解析:构建互动的网页界面
35 2
|
1月前
HTML【详解】超链接 a 标签的四大功能(页面跳转、页内滚动【锚点】、页面刷新、文件下载)
HTML【详解】超链接 a 标签的四大功能(页面跳转、页内滚动【锚点】、页面刷新、文件下载)
25 0
|
1月前
|
数据安全/隐私保护
HTML4(三):表单
HTML4(三):表单
17 0
|
1月前
|
前端开发 JavaScript 数据安全/隐私保护
一篇教你学会HTML:常用标签 | 表格 | 表单 | 特殊符号转义
一篇教你学会HTML:常用标签 | 表格 | 表单 | 特殊符号转义
|
2月前
|
前端开发 JavaScript 容器
技术经验解读:个人练习:使用HTML+CSS3制作图片轮播功能(不使用JavaScript)
技术经验解读:个人练习:使用HTML+CSS3制作图片轮播功能(不使用JavaScript)
45 0
|
2月前
|
前端开发
常用 HTML 标签元素(表格、表单)
常用 HTML 标签元素(表格、表单)
|
2月前
|
前端开发 JavaScript
HTML的a标签如何做返回顶部的功能
HTML的a标签如何做返回顶部的功能
77 0