编程笔记 html5&css&js 025 HTML输入类型（1/2）
在HTML中，<input>元素的type属性定义了不同的输入类型。以下是一些常用的输入类型：
text- 用于文本输入。password- 用于密码输入，输入的字符会被星号*替代。submit- 用于提交表单。radio- 用于单选按钮。checkbox- 用于复选框。button- 用于可点击的按钮，通常与JavaScript一起使用。email- 用于电子邮件地址输入，可以进行基本的验证。url- 用于网址输入，可以进行基本的验证。number- 用于数值输入，可以包括额外的属性来限制输入的数值范围和步长。date- 用于日期选择。time- 用于时间选择。file- 用于文件上传。hidden- 用于隐藏输入字段。range- 用于滑动条，通常用于选择数字范围。
以下是一个简单的HTML表单示例，包括了一些常见的输入类型：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Form</title>
</head>
<body>
<form action="/submit">
Username: <input type="text" name="username"><br>
Password: <input type="password" name="password"><br>
Email: <input type="email" name="email"><br>
Date of Birth: <input type="date" name="dob"><br>
Gender:
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
Favorite Colors:
<input type="checkbox" id="red" name="color" value="red">
<label for="red">Red</label>
<input type="checkbox" id="green" name="color" value="green">
<label for="green">Green</label>
<input type="checkbox" id="blue" name="color" value="blue">
<label for="blue">Blue</label><br>
Bio: <textarea name="bio" rows="5" cols="33"></textarea><br>
Photo: <input type="file" name="photo"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>这个表单包括了文本输入、密码输入、电子邮件输入、日期选择、单选按钮、复选框、文本区域、文件上传以及提交按钮。这些是构建交互式Web表单的基本元素。
评论已关闭