HTML基础-08-表单（＜form＞，＜input type=“text|radio|button|submit“＞，＜select＞ ＜option＞，＜textarea＞）

已于 2022-11-18 23:44:12 修改
阅读量387 收藏 1
点赞数 1
分类专栏： # HTML基础教程 文章标签： html css3 css 表单 前端基础教程
于 2022-03-19 19:50:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xingzuo_1840/article/details/123511314
版权

文章目录

表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

1. 输入 < input >

1.1 输入框 （type=“text” 默认）

语法示例

<input type="text" name="xxxx" value="xxxx">

或默认不用谢

<input name="xxxx" value="xxxx">

完整示例

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>蜀</title>
</head>

<body>
  <p>武将信息：</p>
  <form action="">
    <input name="name" value="关羽"><br>
    <input name="attack" value="1000"> <br>
    <input name="defence" value="1000">
  </form>

</body>

</html>

1.2 单选框 （type=“radio”）

语法示例

<input type="radio" name="xxx" value="xxx">选项内容

完整示例

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>蜀</title>
</head>

<body>
  <p>派出武将：</p>
  <form action="">
    <input type="radio" name="name" value="guanYu">关羽<br>
    <input type="radio" name="name" value="zhangFei" checked="checked" >张飞<br>
    <input type="radio" name="name" value="zhaoYun">赵云
  </form>

</body>

</html>

说明：

  • name值相同的一组只能选一个（我们这里值都是"name"，因此三个武将只能选一个）
  • 添加 checked="checked" 可预选
  • 结果

如下，默认选择张飞

在这里插入图片描述

1.3 复选框 （type=“checkbox”）

语法示例

<input type="checkbox" name="xxx" value="xxx">选项内容<br>

完整示例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>蜀</title> 
</head>
<body>
<p>本次派出武将：</p>
<form action="">
	<input type="checkbox" name="name" value="GuanYu">关羽<br>
	<input type="checkbox" name="name" value="ZhangFei" checked="checked">张飞<br>
	<input type="checkbox" name="name" value="ZhaoYun" checked="checked">赵云 
</form>

</body>
</html>

说明：
checked="checked" 可预选

  • 结果显示
    在这里插入图片描述

1.4 按钮 （type=“button”）

语法示例

<input type="button" value="按钮名">

完整示例

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>蜀</title>
</head>

<body>
  <p>马超出战：</p>
  <form action="">
    <input type="button" value="全军突击">
  </form>

</body>

</html>
  • 结果显示
    在这里插入图片描述

1.5 提交按钮 （type=“submit”）

和button的区别：

  • submit 会提交表单
  • button不会（一般用来关联自定义事件）

语法示例

<input type="submit" value="xxxx">

完整示例

见下文 “复选框+提交按钮”

2. 下拉菜单 < select > < option >

语法示例

    <select name="name">
      <option value="">选项A</option>
      <option value="xxx" selected>选项B</option>
      ......
    </select>

完整示例

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>玄德公手记</title>
</head>

<body>
  <p>选择派出的武将：
  <form action="">
    <select name="name">
      <option value="guanyu">关羽</option>
      <option value="zhangfei" selected>张飞</option>
      <option value="zhaoyun">赵云</option>
    </select>
  </form>

</body>

</html>

说明：
action="" 提交的数据会被传到哪个页面
selected 预选，默认显示这一项（本例落在张飞上）

  • 结果显示
    在这里插入图片描述

3. 文本框 < textarea >

语法示例

<textarea rows="行数" cols="列数">

完整示例

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>蜀</title>
</head>

<body>

  <textarea rows="10" cols="30">
蜀国政务意见箱，请留言。
</textarea>

</body>

</html>
  • 显示结果
    在这里插入图片描述

4. 表单 < form >

4.1 带边框的表单 < fieldset >

  • 语法
	<fieldset>
		<legend>标题是xxx</legend>
		  ……
	</fieldset>
  • 示例
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>蜀</title> 
</head>
<body>

<form action="">
	<fieldset>
		<legend>输入信息:</legend>
		姓名: <input type="text" size="30"><br>
		年龄: <input type="text" size="30"><br>
		邮箱: <input type="text" size="30">
	</fieldset>
</form>

</body>
</html>
  • 显示结果
    在这里插入图片描述

4.2 复选框+提交按钮

点击"提交"按钮，表单数据将被发送到服务器上的“demo-form.php”

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>蜀</title> 
</head>
<body>

<form action="demo-form.php">
姓名: <input type="text" name="Name" value="诸葛亮"><br>
职务: <input type="text" name="Position" value="左军师"><br>
<input type="submit" value="提交">
</form>

</body>
</html>
  • 结果显示
    在这里插入图片描述

玄德公笔记
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
6个Web前端纯CSS3实现的单多选选择框（一）
08-13
在线效果：http://ynif.v099.10000net.cn/demo/checkbox/1/checkbox/index.html
HTML+CSS实现单选框、复选框美观的样式
09-24
主要介绍了HTML+CSS实现单选框、复选框美观的样式,需要的朋友可以参考下
HTML复选框和单选框 checkbox和radio事件介绍
10-27
checkbox 和 radio的事件选择一度让我很迷惑,开始以我对js的理解，我觉得change事件应该是最合理的，可惜啊ie下change事件是在改变后焦点离开时才触发
layui 解决form表单点击无反应的问题
10-16
今天小编就为大家分享一篇layui 解决form表单点击无反应的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
html5单选框表单提交代码.zip
07-05
html5单选框表单提交代码是一款html5表单实例select表单样式美化select单选框表单提交代码。
HTML基础1：单选框
热门推荐
KeleQAQ的博客
04-08 3万+
一.基础 1.基本写法：<input type=“radio” / > 2.实现默认选中，使用checked。 3.若存在多个单选框都在一个分组里，要实现同一时间只能选中一个单选框设置name属性相同即可。 4.提交数据到后台时，后台接收的是value设置的值 二.案例 目标：利用JQuary，点击单选框时将当前单选框设置为checked，同时初始化第一个单选框为checked状态。 html代码 <div id="radioDiv"> <label>气
HTML文本框和单选框
weixin_47556601的博客
01-23 4876
大家好，给大家讲一下HTML文本框和单选框 这是它常见的一些属性 上源码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录注册</title> </head> <body> <h1>注册</h1> <!--表单form--> <!--action: 表单提交
HTML中文本框\单选框\按钮\多选框
爪哇人的博客
10-23 2472
【代码】HTML中文本框\单选框\按钮\多选框。
html文本框和单选框
m0_71088505的博客
12-11 400
【代码】html文本框和单选框。
Web前端-实现输入用户名，弹出输出的用户名信息
weixin_59042297的博客
10-29 1519
1、本程序共分为三段代码，分别是：ServletClass.java和web.xml以及index.heml这三个；2、项目名为GetParameterDemo，包名为org.servlet；3、
html修改默认单选框样式
03-17
修改默认单选框样式 适用于所有浏览器 包括IE8+ 功能和单选框的功能相同！后台可读取checked属性
html单选按钮的控制与实现
06-18
网页开发中经常遇到的单选按钮的实现，可以根据实际需要进行扩展
6个Web前端纯CSS3实现的单多选选择框（四）
08-13
6个Web前端纯CSS3实现的单多选选择框（四）
前端与移动开发之表单
07-25
（1）<label for="text1"></label><input id="text1"> for属性是必须的 且for属性值必须是绑定表单元素的id的属性值 id属性值可以自定义 但不能重复 即全局唯一 （2）下拉表单元素 <select name="" id=""> ...
LayuiForm表单.txt
12-10
form表单元素包括：text 文本输入框，password密码输入框，checkbox复选框，radio单选框，file 文件域，submit表单提交action指向的文件，reset表单清空，image图片提交按钮，button按钮，hidden隐藏域。 select ...
JQuery选择器
04-06
<input type="radio" name="a"/>1<input type="radio" name="a"/>2<br/> <input type="reset" /><br/> <input type="submit" value="提交"/><br/> <input type="text" /><br/> <select><option>Option</option>...
html入门到放弃笔记
05-15
<div align="center" id="container" title="这是一个div"></div> 四大标准属性： 1、id ：定义元素在页面中独一无二的名称 2、title ：鼠标悬停在元素上时，体现的文字 3、class ：引用 类选择器时使用(CSS中)...
HTML中的文档声明
小卡酷谋的博客
04-22 1146
浏览器都开始采纳新标准，但存在一个问题就是如何保证旧的网页还能继续浏览，在标准出来以前，很多页面都是根据旧的渲染方法编写的，如果用的标准来渲染，将导致页面显示异常。书写文档声明原因是不同版本所支持的 HTML 元素类型是不同的，我需要告诉浏览器以哪一种文档类型方式来解析当前的这个 HTML 文件。模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的。为保持浏览器渲染的兼容性，使以前的页面能够正常浏览，浏览器都保留了旧的渲染方法（如：微软的。
Web前端开发之HTML_3
最新发布
zx1026409886的博客
04-23 899
表单在Web网页中用来给用户填写信息，从而采集用户信息，使网页具有交互功能。所有的用户输入内容的地方都用表单来写，如登录注册、搜索框。表单是由容器和控件组成的，一个表单一般应包含用户填写信息的输入框，按钮等，这些输入框、按钮叫做控件，表单就是容器，它能够容纳各种各样的控件。
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body> <el-form ref="form" :model="form" :rules="rules" label-width="80px"> <el-form-item label-width="125px" label="消息通知id" prop="id"> <el-input v-model="form.id" placeholder="请输入消息通知id" /> </el-form-item> <el-form-item label-width="125px" label="消息标题" prop="title"> <el-input v-model="form.title" placeholder="请输入消息标题" /> </el-form-item> <el-form-item label-width="125px" label="消息内容"> <editor v-model="form.content" :min-height="192"/> </el-form-item> <el-form-item label-width="125px" label="组织" prop="vdcid"> <!-- <el-input v-model="form.vdcid" placeholder="请输入组织主键" />--> <el-select :style="{width: '100%'}" v-model="form.vdcid" placeholder="请选择"> <el-option v-for="item in vpcLists" :key="item.id" :label="item.vdc_name" :value="item.id"> </el-option> </el-select> </el-form-item> <el-form-item label-width="125px" label="区域" prop="zoneid"> <el-select :style="{width: '100%'}" v-model="form.zoneid" placeholder="请选择"> <el-option v-for="item in cloudLists" :key="item.id" :label="item.zone_name" :value="item.id"> </el-option> </el-select> </el-form-item> <el-form-item label-width="125px" label="是否开启数据上报" prop="state"> <el-radio-group v-model="form.state"> <el-radio v-for="dict in dict.type.sys_switch" :key="dict.value" :label="dict.value" >{{dict.label}}</el-radio> </el-radio-group> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button type="primary" @click="submitForm">确 定</el-button> <el-button @click="cancel">取 消</el-button> </div> </el-dialog> 必填
06-10
这段代码是一个基于 ElementUI 组件库的对话框组件 el-dialog，用来展示一个表单，其中包含有输入框、下拉选择框、单选框等表单元素，用来收集用户输入的数据。其中，title 属性用来设置对话框的标题，visible.sync 属性用来控制对话框的显示和隐藏；width 属性设置对话框的宽度；append-to-body 属性表示将对话框加入到 document.body 中，避免组件的层级问题。除此之外，还包含了一个插槽 slot，用来显示对话框的底部按钮区域，包括确认和取消按钮。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

玄德公笔记

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值