web(四)html表单类标签

时间:2020-11-30 07:03:56

表单类标签

  操作者用于输入信息,并将信息提交给服务器的标签集合。

  表单标签介绍

      form标签:表单元素(其余标签)标签的容器标签

      input标签:用于用户信息输入的标签。

      button标签:按钮标签。

      select/option标签:下拉框标签。

      textarea标签:文本域标签。

      lable标签:修饰输入元素的文字标签。

  表单元素标签公有的属性(html4标准)

      id:表单标签的唯一索引,一般在js中根据唯一索引获取表单元素。

      name:表单标签的名称,在提交数据时,以name属性作为实际值的索引。

      disabled:禁用当前表单元素。

      readonly:规定表当前表单元素为只读元素。

      value:设定或获取当前表单元素的输入值。

      accessKey:访问当前元素的快捷键,非表单类属性,但通常用在表单元素中。

  form标签:输入标签项的容器,封装子输入标签,主要作用如下

      设定当前表单提交的目标服务器地址。

      设定提交的http请求类型。

      设定提交数据的编码格式。

      通过js可以在提交前验证数据的合法性。

      web(四)html表单类标签

      method的设定

        取值范围

          get:声明本次请求的目的是从服务器获取数据。

          post:声明本次请求的目的是向服务器传送数据。

        get与post的区别

          目的不同

          提交方式不同(一个在响应头,一个在响应体)

          提交数据长度不同,get:不超过255个字符,post理论上不受限制。

          安全性get在地址栏显示信息,不安全。

          缓存机制不同,get请求的地址会保存到浏览器的访问历史记录中,post不会。

      enctype的设定的取值范围

          web(四)html表单类标签

  input标签:用来声明一组用于用户输入信息的标签,使用type属性可以设定输入的类型。

  input标签的分类

    输入类

        text:文本框,type的默认值,

        password:密码框,密码框的文字以黑点方式显示。

        hidden:隐藏框,元素不显示,可以通过此标签提交用户不可见信息如id等。

      私有属性(具备表单标签的公有属性)

        maxlength:限定输入字符的长度。

<input type="text" value="userName" name="text" maxlength="10" />
<input type="password" value="password" name = "password" maxlength="10" />

    选择类

        checkbox:多选框。

        radio:单选框,表单中name属性相同的radio,只能有一个被选中。

      私有属性(具备表单标签的公有属性)

        checked:设定是否被选中,在html中只要声明此属性就被选中

<input type="radio" name = "sex"  value = "1"/></br>
<input type="checkbox" name="fav" checked="false" value="1"/>

    文件类

        file:文件选择框。

      私有属性(具备表单标签的公有属性)

        multiple:设定是否可以多选,在html中只要声明此属性就可以多选。

        accept:设定选择文件的mime类型,多个类型用逗号分隔开。

<input type="file" name = "file" multiple accept="image/gif, image/jpeg"/>

    按钮类

        button:按钮标签。

        image:图片按钮标签。

        submit:提交按钮标签,默认行为是提交当前form表单。

        reset:重置按钮标签,默认行为是当前表单恢复到网页初始化状态。

<input type="submit" value = "提交" />
<input type="reset" value = "重置" />

        button标签:按钮标签,非闭合标签,可以在该标签内部插入其他html元素,因此可以定义出功能强大的按钮。

      私有属性(具备表单标签的公有属性)

        type:按钮的类型。

        reset:重置类型按钮

        submit:提交类型按钮

        button:不同按钮,无默认行为。

<button type="submit"><div>大家好</div></button>

  

  下拉框标签:使用select、option两个标签声明下拉框。  

<select name="pro" >
<option value="1">北京</option>
<option value="2">上海</option>
</select>

      select标签私有属性

        multiple:规定可选择多个选项。

        size:规定可见下拉框选项的数量。

      option标签私有属性

        selected:当前下拉明细项是否被选中。

  

  textarea标签:设定多行的文本输入控件。

    私有属性(具备表单标签的公有属性)

      cols:规定文本区内的可见宽度。

      rows:规定文本区内的可见行数。

      maxlength:文本输入的最大字符数量。

<textarea name = "introduce" maxlength="500" cols="20" rows="10"></textarea>

  label元素:输入标签的文字描述标签,可以代替输入标签响应用户的操作。

      私有属性说明

         for:输入标签的id属性值。

<label for="sex1">女</label>
<input id = "sex1" type="radio" name = "sex" value = "1"/>