html中input、label、form、textarea、select

yumo6662个月前 (04-29)技术文章16

表单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表单及其Input输入类型(html表单的输入框代码)

HTML 表单用于搜集不同类型的用户输入。HTML5 Input,拥有多个新的表单输入类型,提供了更好的输入控制和验证,今天将为大家带来HTML中的表单及其input输入类型。一、HTML表单1、HT...

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

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

HTML5教程从入门到精通,随堂笔记(二)H5的form标签

HTML5从入门到精通,兄弟连京修随堂笔记(二)HTML的框架结构,每日都有新内容,订阅走一波HTML5的form标签问:网站怎样与用户进行交互? 答案:使用HTML表单(form).表单是可以把浏览...

学习web前端开发,需要掌握哪些知识?

可以按照我的教学框架学习,能都掌握也就满足企业目前的人才需求。一、PC端页面重构1、认知行业、岗位、部分专业术语,就业趋势与行业未来展望;2、HTML5核心元素及布局应用;3、CSS3核心属性及布局应...

HTML基础知识(三) HTML标签知识2(html标签及作用)

6.图像标签和路径(1) <img>标签用于定义图像,src为必须属性(2) 特点:属性采取键值对的格式,即key="value"(3) 路径a.目录文件夹和根目录(目录文...

DOM - 根据ID访问HTML元素(根据id获取元素的jquery方法)

根据ID访问HTML元素如下方法实现document.getElementById(idVal):返回文档中id属性值为idVal的HTML元素。上面这个方法简单易用,只要被访问HTML元素具有唯一的...