HTML文本框类型有哪些
在HTML中，文本框是一种用于接收用户输入的表单元素，HTML提供了多种文本框类型，以满足不同的需求，本文将介绍常见的HTML文本框类型，并提供相应的代码示例。
1、普通文本框(<input type="text">)
普通文本框是最基本也是最常见的文本框类型，它允许用户输入单行文本，以下是一个简单的示例：
<!DOCTYPE html>
<html>
<head>
<title>普通文本框示例</title>
</head>
<body>
<form>
<label for="username">用户名：</label>
<input type="text" id="username" name="username">
<br>
<label for="password">密码：</label>
<input type="password" id="password" name="password">
</form>
</body>
</html>
2、数字输入框(<input type="number">)
数字输入框允许用户输入整数，以下是一个简单的示例：
<!DOCTYPE html>
<html>
<head>
<title>数字输入框示例</title>
</head>
<body>
<form>
<label for="age">年龄：</label>
<input type="number" id="age" name="age">
</form>
</body>
</html>
3、单选按钮(<input type="radio">)
单选按钮允许用户从多个选项中选择一个，以下是一个简单的示例：
<!DOCTYPE html>
<html>
<head>
<title>单选按钮示例</title>
</head>
<body>
<form>
<input type="radio" id="male" name="gender" value="male">男<br>
<input type="radio" id="female" name="gender" value="female">女<br>
</form>
</body>
</html>
4、复选框(<input type="checkbox">)
复选框允许用户从多个选项中选择多个，以下是一个简单的示例：
<!DOCTYPE html>
<html>
<head>
<title>复选框示例</title>
</head>
<body>
<form>
<input type="checkbox" id="terms" name="terms" value="agree">同意条款<br>
</form>
</body>
</html>
5、下拉列表(<select>和<option>)
下拉列表允许用户从预定义的选项中选择一个，以下是一个简单的示例：
<!DOCTYPE html>
<html>
<head>
<title>下拉列表示例</title>
</head>
<body>
<form>
<label for="country">国家：</label>
<select id="country" name="country">
<option value="china">中国</option>
<option value="usa">美国</option>
<option value="uk">英国</option>
</select><br><br>
</form>
</body>
</html>
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/316972.html
微信扫一扫