HTML和CSS是网页制作中最基础的两门语言,其中input标签是常用的表单标记之一。它可以创建多种不同类型的表单元素,例如文本框、单选框、复选框、按钮等。我们可以通过输入框,让用户输入数据、搜索信息或发布内容等交互操作。
<input type="text" name="name" placeholder="请输入姓名"> <input type="email" name="email" placeholder="请输入邮箱"> <input type="password" name="password" placeholder="请输入密码">
在上面的示例中,我们使用了type属性来定义输入框的类型。其中text类型是最常用的输入框类型,可以用于输入任意的文本。而email类型则会对输入框的内容做出验证,确保输入的内容符合邮箱格式。password类型则会将输入框中的内容用点号或星号等特殊符号代替,以保护用户输入的隐私。
<input type="radio" name="gender" value="male">男 <input type="radio" name="gender" value="female">女
除了文本框类型之外,我们还可以使用单选框类型。在上面的示例中,我们使用了value属性来指定每个单选框的值,以便提交表单时识别用户选择的选项。而name属性则用于将单选框归类到一组中,保证只能选择其中一个选项。
<input type="checkbox" name="interest" value="football">足球 <input type="checkbox" name="interest" value="basketball">篮球 <input type="checkbox" name="interest" value="tennis">网球
类似于单选框,我们还可以使用复选框类型。上述代码中,我们使用value属性来指定每个复选框的值,以便提交表单时获取用户选择的兴趣爱好,而name属性则用于将复选框归类到一组中,保证可以选择多个选项。
<input type="submit" value="提交"> <input type="reset" value="重置">
除了输入框类型之外,我们还可以使用按钮类型。在上面的示例中,我们分别使用submit和reset类型来创建提交按钮和重置按钮。submit类型会将表单数据提交到服务器上,而reset类型则会将表单中的数据重置为默认值。