【创造者】 表单属性-

<form>

表单用于收集用户的输入,

给服务器提交信息。

包含:

placeholder:文本类型的输入框提示信息。

1.input:

隐藏域:hidden

文本输入框 text

密码输入框:password

单选按钮:radio

复选框:checkbox

数字类型:number 手机号:tel

邮箱:email

输入日期:date可能会根据浏览器不同显示的样式不同但是可以加入插件来改变样式。

输入时间:time 月份:mouth 周 week

颜色选择:color

提交:submit

有些表单控件有验证,提交的时候会执行,来判断是否符合标准。

在后台加以验证。

autofocus自动获取焦点,页面加载完成会自动获取焦点。

跟那个placeholder占位符/提示内容

require内容不能为空

multiple可以提交多个文档,按住ctrl

autocomplete:浏览器会自动检索之前输入过的内容,当用户输入时,会显示在选项中

取值:on/off

注意:得有name属性(表单提交成功)

(这个类似于登陆界面的保存用户名和密码)

文件选择器:file一般用于文件上传

  • methon="post"
  • enctype="multpart/form一个在中间的点date"

文件上传会以二进制方式传输

token令牌,提交表单......

一般value都不会写中文,因为有时候数据传输过程中中文会出现乱码。

看得出来基本上所有的信息采集或者输入都有一个submit提交信息的按钮,另外还有一个复位按钮,也就是重置按钮reset。

action定义和用法

必需的 action 属性规定当提交表单时,向何处发送表单数据。

action="哪",就把信息发送到哪。

向何处发送表单数据。

可能的值:

  • 绝对 URL - 指向其他站点(比如 src="www.example.com/example.htm")
  • 相对 URL - 指向站点内的文件(比如 src="example.htm")

submit:提交,input type:submit

表单的动作属性(action)和确认按钮(submic)

action的作用解释:

1.action=""和action="#"、没有action属性的作用相同,都是提交到当前页面

2.action="http://currentPage.xxx":如果http://currentPage.xxx表示当前页面,则提交到当前页面,同时跳转到当前页面,当然就看不到url的变化;如果http://currentPage.xxx是非当前页面,则提交到非当前页面,也跳转到非当前页面(提交到哪跳转到哪)。

3.表单提交到自身时 action="" 与 action="http://currentPage.xxx" 的区别:

有时候为了省事不写action的值,表单提交时如果当前页面带有参数,参数也会被提交,而且当前网页提交的参数的优先级甚至会大于<form>控件提交的参数,如果还有元素名相同的可能就会从此页获得不正确的值。

例 : SpecTop.asp 页面是表单要提交的页面 , 且有从上级页面传递过来参数

action="" 真正提交时的页面 : SpecTop.asp?ClassID=000100200005&SpeID=947&SpeType=3

如果 <form> 中有 <input type=”text” name=”SpeID” value=”1000”/>, 提交时得到的值将会是 947, 而不是 1000, 而 action=”currentPage.xxx” 就能得到1000

2.selete下拉选框

类似于选地址那种...

省市县三级联动会用到ajax

textarea rows= 显示几个字的行 cols=显现几个字的宽 placeholder=文本类型的输入框提示信息

3.单选多选按钮

radio单选

checkbox多选

4.button按钮

使用typeplainroundcircle属性来定义 Button 的样式。

type:

例如 

9fe02345b3f1415292a52284edd21c86.png

<el-row>

plain朴素按钮

round圆角按钮

e4d50a4e64b9fa70ad336fb16970f395.png

还有小圆圈的circle,然后加入icon这种图标,图标按钮

92624d45ce1e53e960d6a4d2d71df269.png

text文字按钮,既没有边框有没有背景色

按钮组:el-botton-group

60410783ff22b646760ffc0452b2b778.png

加载中:loading="true"

 额外的尺寸:mediumsmallmini,通过设置size属性来配置它们。

95aafe24fda842c085353c2b931b33f1.png

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值