input标签,select标签

本文详细介绍了HTML中的input和select标签。input标签用于创建各种表单控件,如文本输入框、复选框和单选按钮,通过改变type属性实现不同功能。select标签则用于创建下拉选择列表,用户可以从多个选项中进行选择。通过实例展示了如何在HTML表单中使用这两个元素。
摘要由CSDN通过智能技术生成


一、input标签

1.简介

常常我们使用在一个网页中数据提交标签,比如我们留言板、评论等可以填写数据,标签提交处理地方都需要表单标签,而form表单标签内放输入框input、单选、多选、提交按钮等标签内容,而输入框、单选、多选、按钮等控件都可以使用表单标签input实现,只需赋予不同type值即可实现不同表单控件功能


2.语法


<input name="" type="submit" value="提交" />

Name为此表单控件识别命名,一般使用英文字母在一个页面里具有唯一性

Type为表单控件样式

type="text" 输入框控件,用于输入内容如用户名、密码之类内容输入框控件

type="submit" 按钮控件,用于提交、重置动作

type="checkbox" 多选复选框控件,用于多选题、多选功能(进入了解 html checkbox多选框)

type="radio" 单选框,用于单选,唯一选择功能

3.案例


<form action="" method="get"> 
<label>type="text" 输入框</label> 
<input name="" type="text" size="22" /><br /> 
<label>type="checkbox" 多选复选框</label> 
<input name="" type="checkbox" value="" /><br /> 
<label>type="radio" 单选框</label> 
<input name="" type="radio" value="" /><br /> 
<label>type="submit" 按钮</label> 
<input name="" type="submit" value="提交" /> 
</form> 

二、select标签

1.简介

select 标签用于我们用于表单下拉选择所需项。

2.语法


<select name="select1"> 
<option value="0">select标签</option> 
<option value="1">www.baidu.com</option> 
</select>

3.案例


<form action="" method="get"> 
<label>普通下拉列表菜单</label> 
<select name=""> 
<option value="0">option 000</option> 
<option value="1">option 111</option> 
</select> 
</form> 


  • 1
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用JavaScript来将一个input元素转换为select元素。以下是一个示例代码: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Convert input to select</title> </head> <body> <label for="myInput">请选择一个选项:</label> <input type="text" id="myInput" name="myInput" value="选项1"> <button onclick="convertInputToSelect()">转换为下拉列表</button> <script> function convertInputToSelect() { // 获取 input 元素 var input = document.getElementById("myInput"); // 创建 select 元素 var select = document.createElement("select"); select.setAttribute("name", input.getAttribute("name")); select.setAttribute("id", input.getAttribute("id")); // 创建选项元素 var option1 = document.createElement("option"); option1.setAttribute("value", "选项1"); option1.textContent = "选项1"; var option2 = document.createElement("option"); option2.setAttribute("value", "选项2"); option2.textContent = "选项2"; var option3 = document.createElement("option"); option3.setAttribute("value", "选项3"); option3.textContent = "选项3"; // 添加选项元素到 select 元素中 select.appendChild(option1); select.appendChild(option2); select.appendChild(option3); // 替换 input 元素为 select 元素 input.parentNode.replaceChild(select, input); } </script> </body> </html> ``` 在上面的示例中,我们首先创建一个input元素和一个按钮,然后在点击按钮时调用convertInputToSelect函数。在函数中,我们首先获取input元素,然后创建一个select元素,并根据input元素的属性设置select元素的name和id属性。接着,我们创建了三个option元素,并将它们添加到select元素中。最后,我们使用parentNode.replaceChild()方法将input元素替换为select元素。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值