码迷,mamicode.com
首页 > 其他好文 > 详细

表单属性、标签

时间:2019-08-18 15:35:54      阅读:206      评论:0      收藏:0      [点我收藏+]

标签:属性   单元素   hid   地址   尺寸   ber   内容   reset   关联   

总结

一、      表单概述

  1. 1.     什么是表单:表单是一块可采集用户数据的区域:表单对后端开发者至关重要
  2. 2.    如何创建表单区域:

a)    用form元素表示表单

b)    用action属性表示表单的提交地址

c)    用method属性表示表单的提交方式

d)    在制作静态页面时,可不用书写上述的属性

e)    在制作静态页面时,建议不要设置form元素的样式

  1. 3.    表单中可放置哪些元素

a)    对于静态页面的开发者,表单只是一个普通的块盒,内部可放置任何元素

b)    通常情况下,表单中会放置一些可以与用户进行交互的元素

文本框 <input type=”text”>

点击按钮  <input type=”buttont” value=”点击”>

提交按钮  <input type=”submit” >

 复选框 <input type=”checkbox” name =”” value=””>

单选框 <input type=”radio” name =”” value=””>

文件上传 <input type=”file”>

密码 <input type=”password”>

重置按钮 <input type=”reset”>

隐藏  <input type=”hidden” name =”” value=””>

数字框 <input type=”number” min =”” max=”” step=””>

滑块数字 <input type=”range” >

日期框 <input type=”date” >

年月框 <input type=”month” >

一年中的第几周 <input type=”week” >

时间 <input type=”time” >

下拉列表:<input type=“text”id=“”list=“a”>

             <datalist id=”a”>

                  <option value=””></option>

                  <option value=””></option>

              </datalist>

          <select name=”” id =””>

                  <option value=””></option>

                  <option value=””></option>

          </select>

分组 <opegroup></opegroup>

多行文本

<textarea name=”” id=”” rows=”” cols=””></trxearea>

分组信息

<fielaset>

    <legend></legend>

<legend></legend>

                       </fielaset>

属性:name:发送到服务器的键名      value:发送到服务器的值

      Maxlength:长度             required:要求必须填

      Pattem:填写规则           disabled:禁用

      Placeholder:提示            readonly:只读

      Autocomplete:自动识别      selected:选择

      Size:展示个数               <label></label>关联

由于这些交互元素通常出现在表单中,因此,我们常称之为表单元素

  1. 4.   表单元素的两个重要属性

name属性:表示发送到服务器的键名

value属性:表示发送到服务器的值

二、    表单元素—文本框

使用input元素表示一个文本框:input是一个空元素

可通过type属性设置文本框类型

三、          表单元素—按钮

1)   使用input元素或button元素表示按钮

2)  按钮有很多种

a)    普通按钮:点击后没有任何额外的效果

b)   重置按钮:必须出现在表单中,点击后将其他表单元素重置为初始值

c)    提交按钮:必须出现在表单中,点击后会将表单数据提交到服务器

d)    图片按钮:功能同提交按钮一样,只不过样式为一张图片,该按钮已很少使用

3)  input和button的比较

a)    input是空元素,button是普通元素

b)   input是旧版本中的元素,button是HTML5中的元素

c)    input按钮中只能写文本,button的内容更加丰富

d)    input的兼容性更好,button稍差

四、    表单元素—下拉列表

   使用select和option元素的组合表示下拉列表

下拉列表的类型:普通的下拉列表

                选项分组的下拉列表

五、    表单元素—数据列表和多行文本框

使用datalist元素表达数据列表

使用textarea元素表达多行文本框

<textarea name=”” id=”” rows=”” cols=””></trxearea>

六、    表单元素的分组和状态

   使用fieldset和legend元素,对表单内容进行分组

使用disabled属性和readonly属性,设置表单元素的可用状态

七、        美化表单元素

1、  伪类focus:表示聚焦时候的样式,常用于表单元素

2、   认识表单元素的默认样式

表单元素均默认为行盒——水平排列

表单元素均为可替换元素——可设置盒模型中各个部分的尺寸

文本框聚焦时会有outline

表单属性、标签

标签:属性   单元素   hid   地址   尺寸   ber   内容   reset   关联   

原文地址:https://www.cnblogs.com/caoxiangwang/p/11372426.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!