option标签怎么嵌套php标签,HTML <option>标签 value 属性

HTML 标签 value 属性

option标签的value属性是用于传送到服务端的值。服务端根据vlaue来获取。在开始标签 与结束标签 之间的内容是列表显示的内容。下拉列表显示的值和value里面的值可以一样,也可以是不一样的。标签需要被嵌套,可以嵌套于标签。在HTML5之后,也可以嵌套于标签。

select标签案例

以下使用的是嵌套到标签,形成表单常见的下拉框。

后端前端样式脚本数据库

后端

前端

样式

脚本

数据库

5fafddf76add9a41814aa00a898037ca.pngvalue不是必须的,在没有value的情况下option开闭标签之间的值会代替value值。

无value值

在无value的情况下,服务端同意可以通过value获取到数据,不过获取到的数据就是option开闭标签之间的值。

后端前端样式脚本数据库

后端

前端

样式

脚本

数据库

无option开闭标签之间的值

在标签下的option不能没有开闭标签之间的值,否则不能显示,但服务端能接受。标签下可以

语法

datalist标签案例

datalist标签是需要结合input元素的输入框的,就是在输入框加上下拉框功能。datalist标签下的option标签可以没有option闭标签。

写法一:

写法二:

无value值

在无value的情况下,服务端同意可以通过value获取到数据,不过获取到的数据就是option开闭标签之间的值。

后端

前端

样式

脚本

数据库

语法

支持浏览器

95ffd7c42d970fdbc512701bb4a26945.png

3a729b84d94519de1c82c0b6fa62e04e.png

9b32a8cec84269d33d84cad24320dd13.png

1b0c219e477a6675726a96c9791fec2c.png

12496100f50e4260f8154a3be171818f.png

<h1>注册信息</h1> <form action="action_page.php" method="get"> <label>姓名:</label><input type="text" placeholder="请输入真实姓名"> <br></br> <label>密码:</label><input type="password" placeholder="请输入密码"> <br></br> <label>确认密码:</label><input type="password" placeholder="请输入确认密码"> <br></br> <label>性别:</label> <label><input type="radio" name="gender"> 男</label> <label><input type="radio" name="gender" checked> 女</label> <br></br> <label>居住城市:</label> <select> <option>北京</option> <option>上海</option> <option>广州</option> <option>深圳</option> <option>武汉</option> </select> <h2>教育经历</h2> <label>最高学历:</label> <select> <option>博士</option> <option>硕士</option> <option>本科</option> <option>大专</option> </select> <br></br> <label>学校名称:</label><input type="text"> <br></br> <label>所学专业:</label><input type="text"> <br></br> <label>在校时间:</label> <select> <option>2015</option> <option>2016</option> <option>2017</option> <option>2018</option> </select> <br></br> <select> <option>2019</option> <option>2020</option> <option>2021</option> <option>2022</option> </select> <br></br> <h2>工作经历</h2> <label>公司名称:</label><input type="text"> <br></br> <label>工作描述:</label> <br> <textarea></textarea> <br></br> <input type="checkbox"><label>已阅读并同意以下协议:</label> <ul> <li><a href="#">《用户服务协议》</a></li> <li><a href="#">《隐私政策》</a></li> </ul> <br></br> <button>免费注册</button> <button type="reset">重新填写</button> </form>
最新发布
04-03
<html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>www.qiandu.com</title> </head> <body> <h1>wasai</h1> <p id='123'>不错</p> <img src="1.jpg"> <audio src="1.mp3">asd</audio> <video src="2.mp4">视频</video> <table border="1"> <caption>aaa</caption> <tr> <th>序号</th> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> <tr> <td>1</td> <td>张三</td> <td>男</td> <td>18</td> </tr> <tr> <td>2</td> <td>王五</td> <td>男</td> <td>22</td> </tr> </table> <br> <a href="login.html">登陆</a> <form action="login.php" method="get" onclick="alert('')"> <script> function test() { var a=document.getElementById('username').value; var a=document.getElementById('password').value; alert("用户名:" + username + "\n密码:" + password); return false; // 阻止表单提交 } </script> 用户:<input type="text"id="username" name="username"><br> 密码:<input type="password" id="password" name="password"><br> 男:<input type="radio" name="sex" value="nan"> 女:<input type="radio" name="sex" value="nv"><br> 打游戏:<input type="checkbox" name="xq[]"> 听音乐:<input type="checkbox" name="xq[]"> 看小说:<input type="checkbox" name="xq[]"><br> <select id="2" name="city" > <option>成都</option> <option>广安</option> <option>北京</option> </select> <input type="file" name="file"> <textarea id="1" name="" rows="5" cols="4"></textarea> <input type="button" value="提交" name= "" > <button>注册</button> </form> <script src="test.js"></script> </body> </html>
03-08
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值