美文网首页
学习笔记-表单标签

学习笔记-表单标签

作者: 香泡泡 | 来源:发表于2018-12-12 13:20 被阅读11次

几个简单的概念

表单:专门用来手机用户信息的。

元素:在html中的标签/标记/元素

表单元素:表单标签,在浏览器中所有的表单标签都有自己特殊的外观和默认功能。

表单标签的格式:

<form>

        <表单元素>

</form>


表单元素

input 元素(标签)

<input type=“text/password/”>

属性:

—明文输入框  text

账号:<input type=“text”>

—暗文输入框  password

密码:<input type=“password”>

—给输入框设置默认值  value

账号:<input type=“text” value=“lnj”>

密码:<input type=“password” value =“123”>

—单选框  radio

<input type=“radio” name=“gender”>男

<input type=“radio”  name=“gender”>女

<input type=“radio”  name=“gender” checked=“checked">保密

注意点:

1.默认情况下,单选框不会互斥,要想单选框互斥必须给每个单选框标签摄制一个那么属性,然后name属性还必须设置相同的值。

2.要想让单选框默认选中某一个框子,可以给input标签选一个checked属性。

3.如果html中属性的取值和属性的名称一样,可以只写一个,但是在xhtml中必须写上取值,所以在企业开发中,推荐大家不要省略取值。

—多选框  checkbox

爱好

<input type=“checkbox”>篮球

<input type=“checkbox”>足球

<input type=“checkbox”>游泳

—普通按钮  botton

<input type="button" value="我是按钮” onciclk="alert('lnj')">

作用:配合js完成一些操作

—图片按钮  image

<input type="image" src="images/1.jpg” onciclk="alert('lnj')">

作用:配合js完成一些操作

—重置按钮  reset

<input type="reset">

作用:清除表单中的数据

注意点:

1.默认标题为“重置”。

2.通过value属性来修改默认标题。

—提交按钮  submit

<input type="submit">

作用:将表单中的数据提交到远程服务器。

注意点:

1.明确提交那些数据,通过name属性来完成,默认已设置name属性的表单,全部提交到远程服务器。

1.明确提交到制定的服务器,通过<form action="服务器地址“>来完成。

—隐藏域 hidden

<input type="hidden">

作用:悄悄收集数据发送给服务器。

注意点:隐藏域不会出现在界面中。

label 元素(标签)

作用:

默认情况下,文字和输入框之间是没有关联关系的,如果想要他们之间有联系,则需要让文字和输入框之间进行绑定,label️就用语双方的绑定。

绑定方式1:

1.将文字用lable标签包裹起来.

2.给我们的输入框添加一个id属性.

3.在lable标签中通过for属性和输入框中的id进行绑定即可.

<label for="account”>账号:</label><input type=“text” id="account">

<label for="psw”>密码:</label><input type=“password” id="psw">

绑定方式2:

<lable> 账号:<input type=“text” > </lable>

<lable>密码:<input type=“password” > </lable>

注意点:

只能对于绑定,不能随意绑定

datalist 元素(标签)

作用:给输入框绑定待选项

绑定到选列表的步骤:

1.编写一个输入框。

2.编写一个datalist列表。

3.给datalist列表标签添加一个id。

4.给输入框添加一个list 属性,将datalist的id对应的赋值给list属性即可。

<form action="">

    车子:<input type="text" list="cars">

<datalist id="cars">

    <option value="奔驰">

    <option value="宝马">

    <option value="奥迪">

</datalist>


H5新增表单标签属性

邮箱:

<input type="email">

域名:

<input type="URL">

数字:

<input type="number">

日期:

<input type="date">

颜色:

<input type="color">

非input标签

select 标签—下拉列表

作用:定义下拉列表

格式案例:

<form action="">

        <optgroup label="杭州">

            <option  selected="selected">西湖区

            <option >拱墅区

            <option >滨江区

        <optgroup label="上海">

            <option >杨浦区

            <option >黄浦区

            <option >浦东新区

</form>

注意点:

1.下拉列表不能输入内容,但是可以直接在列表中直接选择内容。

2.可以通过selected来指定默认项。

3.可以通过给option标签包裹一层optgroup标签来给下拉列表中的数据分类。

textarea标签

作用:定义一个多行输入框

格式:

<textarea name="hxp" id="hap" cols="30" rows="10">

</textarea>

注意点:

1.默认情况下输入框可以无限换行

2.默认情况下输入框有自己的宽度和高度

3.可以通过cols和rows来指定输入框的宽度和高度,但是虽然指定了列数和行数,但还是可以无限往下输入。

4.默认情况下,输入框可以手动拉伸。

相关文章

  • HTML笔记--表单标签

    HTML笔记--表单标签 标签(空格分隔): HTML 表单标签(****最重要的一个标签*****) 可以用来实...

  • 学习笔记-表单标签

    几个简单的概念 表单:专门用来手机用户信息的。 元素:在html中的标签/标记/元素 表单元素:表单标签,在浏览器...

  • HTML5学习笔记之表单标签

    HTML5学习笔记之表单标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之...

  • HTML表单、按钮、下拉菜单基础

    1.表单标签 表单标签(form)表单标签的作用:用来收集与用户信息 - 实质是将表单标签作为容器,收集表单标签中...

  • 2019-10-24 表单标签

    今天学习了html表单 HTML表单(

    标签) 属性: 1 action:决定表单提交的地...

  • Day22—HTML和CSS

    1 表单标签和input标签 1.1 表单标签 表单标签:form标签, 表单标签是用来收集用户信息的,是一个容...

  • day22-表单和css基础

    1 表单标签和input标签 1.1表单标签(form) 表单标签的作用:收集用户信息。-实质是将表单标签作为容器...

  • 二阶段002day 部分html和css

    1.表单标签和input标签 -1.表单标签(form)表单标签的作用:收集用户信息。 - 实质是将表单标签作为容...

  • Day09_表格表单和统筹

    学习目标 1、表单标签及属性高级 2、表格标签及属性高级 3、CSS统筹 4、BFC概念和应用场景 一、表单标签及...

  • html与css

    1.表单标签和input标签 1.表单标签(form) 表单标签的作用是用来收集用户信息,实质是将表单标签作为容器...

网友评论

      本文标题:学习笔记-表单标签

      本文链接:https://www.haomeiwen.com/subject/imiuhqtx.html