HTML中input可以创建的输入类型有哪几种

很多新手在使用html的input创建输入类型的时候都应该会纠结自己明明写得好好的input代码就是不能实现呢？我觉得应该是你不太清楚input中几种输入类型的用法吧！

操作方法

  • 01

    首先，我们要清楚input可以创建哪些输入类型呢？

  • 02

    第一种，姓名类文本的创建。这种类型比较好记住，只要记住输入的类型是text文本类型就能写对！完整的演示代码可以参考下图。 <form> 名： <input type="text" name="firstname"> <br /> 姓： <input type="text" name="lastname"> </form>

  • 03

    第二种，密码类文本的创建。这种也很好记住，就是password的使用。不过需要注意的是密码在输入的时候，浏览器将使用项目符号来代替这些字符。这也就是我们平时看到的黑点。完整的代码可以参考下图的。 <form> 用户： <input type="text" name="user"> <br /> 密码： <input type="password" name="password"> </form>

  • 04

    第三种，复选框的创建。这种是checkbox的使用。我们在选择的时候各个选项不会相互的干预，即选择了第一项，同时还可以选择其他几项。我们拿自行车和汽车举例。大家可以试试这个效果。 <form> 我喜欢自行车：<input type="checkbox" name="Bike"> <br /> 我喜欢汽车： <input type="checkbox" name="Car"> </form>

  • 05

    第四种，单选框的创建。这个适用于只有唯一性的选项。单选大家应该明白当用户点击一个单选按钮时，该按钮会变为选中状态，其他所有按钮会变为非选中状态。性别选择就是比较好记的例子。单选的单词是radio要记住哦！

  • 06

    第五种，按钮的创建。按钮也是输入的一种类型哦！button就是按钮的意思！ <input type="button" value="Hello world!"> 我们可以对value里面的值根据自己的需要来定义。

  • 07

    第六种，以上几种方式的组合应用。组合代码里面新增了<form name="input" action="/html/html_form_action.asp" method="get"> 这条，我相信大家应该能明白吧！

赞 (0)

相关推荐

  • Unity NGUI input 长度与输入类型设置

    Unity NGUI input 输入长度与输入类型设置,可限制输入的长度和输入的类型 操作方法 01 UIInput 脚本预览,找到characterLimit属性,设置指定长度值UIInput.c ...

  • excel怎么对单元格指定输入类型及显示批注?

    我们在编辑单元格时,需要对单元格输入的值进行约束,比如单元格中只能输入整数,输入其他值时会弹出报错提示. 有时候我们需要对单元格添加信息显示(批注),比如点选单元格,能显示此单元格修改者的信息. 下面 ...

  • macbook电脑怎么创建一个管理员类型的账户

    macbook电脑怎么创建一个管理员类型的账户

    最近有小伙伴问macbook苹果电脑怎么新建管理员账户,下面小编介绍一下.具体如下:1. 打开电脑,点击"系统偏好设置"图标2.进入后,点击页面中的"用户与群组" ...

  • 如何在win7电脑中取消已创建的索引?

    win7 64位旗舰版系统已经面世很久了,想必大家都对win7旗舰版电脑中的索引功能十分的熟悉了吧?是的,很多用户都喜欢使用到win7旗舰版电脑中的索引功能,因为创建索引可以提高咱们搜索的效率,让操作 ...

  • 在Excel表中如何一键创建下拉菜单?

    今天要和大家分享的是:Excel如何一键创建下拉菜单?有需要的朋友可以参考本文,一起来看看吧! 步骤 1.首先打开数据表格,会看到有姓名的一列,然后需要在对应的姓名后面创建性别的下拉菜单,如下图所示: ...

  • 如何在学习通app中更改已创建的笔记内容？

    如何在学习通app中更改已创建的笔记内容？

    相信很多小伙伴都有在使用学习通app,在其中如何更改已创建的笔记内容呢?方法很简单,下面小编就来为大家介绍.具体如下:1. 首先,打开手机上的"学习通".进入首页后,点击底端的&q ...

  • 怎么在WPS文字中插入的表格里输入连续的数字

    怎么在WPS文字中插入的表格里输入连续的数字

    今天给大家介绍一下怎么在WPS文字中插入的表格里输入连续的数字的具体操作步骤.1. 首先我们打开电脑上的wps2019软件,然后点击上方的文字,选择新建一个空白文档,然后在打开的页面,选择插入---表 ...

  • 怎么给浏览器中的网页创建桌面快捷方式

    怎么给浏览器中的网页创建桌面快捷方式

    我们在使用电脑上的浏览器浏览网页的时候,如果经常使用某个网页,可以设置创建桌面快捷方式,以后点击桌面快捷方式就可以直接打开了,今天就跟大家介绍一下怎么给浏览器中的网页创建桌面快捷方式的具体操作步骤.1 ...

  • Win10电脑中讲述人声音的语言类型怎么设置

    Win10电脑中讲述人声音的语言类型怎么设置

    如果我们想要对win10电脑中讲述人声音的语言类型进行选择,该怎么操作呢?今天就跟大家介绍一下Win10电脑中讲述人声音的语言类型怎么设置的具体操作步骤.1. 首先打开电脑,进入桌面,点击左下角的&q ...