html中input、label、form、textarea、select

yumo6668个月前 (04-29)技术文章65

表单input:表单是用来收集信息的,由表单控件(表单元素)、提示信息、表单域构成。

input控件的属性及值:



除以上属性外,input元素type属性还有一个number属性值,此为仅可以填数字,默认是可以选择或者填写任意数字,但是当type属性为number属性值时,可以使用max和min属性来限制数字的取值范围,input更多属性见HTML5


 <input type="number" min="0"> <!-- min属性限定最小值为0 -->

label标签:

label标签是为input标签服务的,用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点


    <label> <!-- 1、直接使用label标签包裹要点击的元素获得焦点 -->
        姓名:<input type="text">
    </label>
    
    <label for="name">姓名:</label> <!-- 2、使用label标签的for属性找input元素获得焦点 -->
    <input id="name" type="text"/>

表单域form:

form元素用于创建一个表单,form中的所有内容都会被提交给服务器;默认form标签中需要有一个submit按钮,如果form里面没有submit按钮,那么可以使用button中type属性为submit的button按钮,这个buttont按钮可能不在form表单中,此时可以给type属性值为submit的button添加form属性,值为form表单的id值,如:



     <form action="" method="get" name="" id="userform"> <!-- action属性是指定表单提交给后端的地址,method属性设置提交方式,其属性值有post和get,name属性用来给表单域定义名字,用于区分表单域 -->
      姓名:<input type="text">
      年龄:<input type="number" min="0">
    </form>
    <button type="submit" form="userform">提交</button>

文本域textarea:

input元素只能显示一行内容,textarea元素可以显示多行,一般做留言效果使用,常常被称为富文本域。


     <!-- rows属性限定行数,当行数超过限定后会出现滚动条,cols属性限定的是列数,当超过限定后会换行。 -->
    <textarea cols="20" rows="10"></textarea>

UEditor:在实际开发中如果需要用到比较复杂的富文本域(类似word的,可以上传视频图片等功能)推荐使用第三方插件,这里推荐大家一款使用的富文本插件:UEditor,使用它可以在网页中实现类似word等编辑,如果想要了解更多及方法请查阅官方文档:
http://fex.baidu.com/ueditor/,当然类似的富文本编辑器还有很多,如:CKeditor:https://ckeditor.com/等



富文本编辑器可以自己做,其原理是利用document的execCommand()方法,这个方法实际开发中很少用,已经废弃,所以一般很少有人了解,如果想要了解更多,可阅读官方文档:
https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand

下拉列表(下拉菜单)select:


    <body>
        <select name="" id="">
            <optgroup value="" label="分组1"><!-- optgroup标签用来分组 -->>
                <option value="">
                    测试1
                </option>
                <option value="">
                    测试2
                </option>
                <option value="">
                    测试3
                </option>
            </optgroup>
            <optgroup value="" label="分组2">
                <option value="">选项1</option> <!-- select默认选择第一个option,当给option加selected属性时,则会选中此项显示 -->
                <option value="" selected="selected">选项2</option> <!-- selected属性的selected属性值可以省略,其效果不变-->
                <option value="">选项3</option>
            </optgroup>
          </select>
    </body>

块引用标签:

有的时候会引用名人名言等,此时建议使用引用标签,引用标签分为长引用和短引用两种,长引用标签效果是插入换行和外边距,短引用标签的效果是加上虚拟的引号。


    <blockquote>海上生明月,天涯共此时。</blockquote><!-- 长引用标签 -->
    
    <q>引号</q><!-- 段引用会给内容加上虚拟的引号,这个引号根本不存在。 -->


提示:本文图片等素材来源于网络,若有侵权,请发邮件至邮箱:810665436@qq.com联系笔者 删除。

笔者:苦海123

其它问题可通过以下方式联系本人咨询:

QQ:810665436

微信:ConstancyMan

相关文章

初识HTML——列表标签和表单标签(html列表标记)

列表标签在html中列表分为无序列表、有序列表和自定义列表(项目列表)。接下来就看看他们有什么不同吧!作用:如果说table标签是用来显示数据的,那么列表标签就是用来进行html页面布局的。无序列表语...

HTML表单4(form的action、method属性)——零基础自学网页制作

表单的工作过程表单的信息发送与处理过程可以简单的进行图示,如下图。以注册会员为例,用户在自己的电脑上打开相应的注册表单页面填写信息,完成填写后点击提交按钮,也就是图中1所示过程。这时浏览器会将这些信息...

JavaScript 控制文本框和文本域(js设置文本框内容)

文本框是表单中与用户打交道最多的元素之一,它包括单行文本框<input type="text">和多行文本框<textarea>,更广义的还可以包括密码输入框&...

10个免费的HTML在线编辑工具(html 在线编辑功能)

onlinehtmleditor.net是非常简单和易用的HTML在线编辑器,适用的标签有H1,H2,H3,H4,P,IMG,List等,还可以在下方查看实时预览。你可以手动输入这些标签,也可以通过点...

JavaGUI——Java图形用户界面(java图形界面常见问题)

1、Java GUI 概述GUI(Graphical User Interface,简称 GUI,图形用户界面)是指采用图形方式显示的计算机操作用户界面,与早期计算机使用的命令行界面相比,图形界面对于...