html中input标签的属性(input标签属性有哪些)

input标签属性有哪些

input标签属性都有：

　　

　　1、新建一个HTML文档，文件名为test.html，用于测试说明input的属性。

　　

　　2、input的value属性。该属性用于定义input框的初始值。

　　

　　3、input的readonly属性。该属性规定了input只读状态，不可以进行修改。

　　

　　4、input的disabled属性。该属性用于禁用input框，不可用、不可点击、不能进行表单提交。

　　

　　5、input的size属性。该属性用于规定输入框的长度，值越大输入框越长。

　　

　　6、input的maxlength属性。该属性用于规定输入框输入内容的最长长度。

　　

　　7、input的placeholder属性。该属性主要用于提示输入框的内容。

　　

　　

好用不知道的HTML标签

details标签

details 标签可以实现点击更多或者手风琴的效果，不需要写额外的 js 代码，需要配合 summary 标签一起使用。

details标签效果

details summary展开更多/summary table tr th序号/th th名称/th th地址/th th工作/th /tr tr td1/td tdtom/td td美国/td td搬砖/td /tr tr td2/td tdjack/td td日本/td td搬砖/td /tr /table /detailscontenteditable可编辑属性

contenteditable是可以在元素上设置以使内容可编辑的属性。 它适用于 div , span 等元素。只需要在标签属性上添加 contenteditable 属性就可以实现元素内容的编辑。

可编辑效果

!-- html 代码 -- div contenteditable可编辑区域/divmark标签

mark 标签表示为引用或符号目的而标记或突出显示的文本，这里是 mark 标签默认的标记背景颜色，也可以通过 css 样式来修改，例如：

mark标签高亮的内容

datalist标签

datalist 标签包含了一组option元素，这些元素表示其它表单控件可选值，具有一定的联想过滤功能。

datalist效果

!-- html 代码 -- input list=weather datalist id=weather option value=晴天 option value=阴天 option value=小雨 option value=雷阵雨 /datalist

input 标签上的 list属性和 datalist 标签上的 id 属性是一致的，datalist 为 input输入框提供可选值列表。

noscript标签

如果页面上的脚本类型不受支持或者当前在浏览器中关闭了脚本，则在 noscript 标签中定义脚本未被执行时的替代内容。比如现在大部分的 SPA 页面，一旦不支持 ，页面基本上什么内容都没了，此时可以靠这个标签做友好提示。在vue 框架的入口文件 index.html中就使用了 noscript 标签。

Web前端开发基础知识，HTML中表单元素的理解

表单

什么是HTML表单？

表单form是网页获取用户输入数据的一种方式，如图：

表单

表单中通常包括各种输入框、文本标签、提交按钮等。

1、一个简单的表单

首先要有一个form标签，其他表单控件放到from标签中，第一个是label标签用来描述后面的文本框中需要输入什么内容，然后是一个input标签，type的值是text表示是一个文本框，然后也是一个input标签，type的值是submit，表示是一个提交按钮，当然想要真正的提交数据还需要一些额外的属性。

form action= label for=学生姓名/label input type=text input type=submit value=保存/form2、form标签不但包含所有的表单控件，还会告诉浏览器当你提交表单的时候要把表单数据发送到哪里，以及使用什么方式发送。form action=login.php method=POST/form

action属性指定表单数据要发送到哪个服务器脚本上，例如这里发送到login.php ，method属性指定服务器发送的方式，有post和get两种方式，在表单当中常用post。

3、for属性和id属性

label标签for属性的值应该和input标签中id属性的值一致，这样这两个表单控件就会被关联起来。如下，这里将label关联到input上。

form label for=student_name学生姓名/label input type=text id=student_name input type=submit value=保存/form

for属性

当我们点击文本标签学生姓名时候，文本框会自动获取输入光标，等待用户输入数据。

4、input标签的type属性

type属性决定input标签显示成什么样子，type属性种类很多，如下：

form input type=text input type=checkbox input type=radio input type=file input type=password input type=submit input type=reset /form5、文本区域

input文本框标签可以接受少量的单行文本，textarea标签可以接受用户输入的多行文本，如下，和input标签不同，textarea标签必须有开始标签和结束标签。

label for=summary总结/label textarea id=summary cols=30 rows=10/textarea

文本区域

6、下拉列表

使用select标签和option标签创建下拉列表

select name= id= option value=男/option option value=女/option /select综合示例：h2学生信息/h2 form action=success.html label for=student-name姓名/label input type=text id=student-name value=br label for=photos上传照片/label input type=file id=photosbr label for=性别/label input type=radio name=gender id=male checkedlabel for=male男/label input type=radio name=gender id=femalelabel for=female女/labelbr label for=班级/label select name= id= option value=一班/option option value= selected二班/option option value=三班/option option value=四班/option /selectbr label for=teacher-comments老师评语/label textarea name= id=teacher-comments cols=30 rows=10/textareabr input type=checkbox id=pass checked label for=pass考试通过/labelbr input type=submit value=提交 input type=reset value=重新填写 /form

html表单

每天进步一点点，跟着教头学开发。