您的位置:首页 > 娱乐 > 明星 > 服装网站建设报关_学校网站首页_seo关键词查询_打开浏览器直接进入网站

服装网站建设报关_学校网站首页_seo关键词查询_打开浏览器直接进入网站

2024/12/23 9:05:05 来源:https://blog.csdn.net/2301_81819439/article/details/143840157  浏览:    关键词:服装网站建设报关_学校网站首页_seo关键词查询_打开浏览器直接进入网站
服装网站建设报关_学校网站首页_seo关键词查询_打开浏览器直接进入网站

目录

三,form表单

1,表单

(1)定义:

(2)action 属性

(3)method 属性

2,表单元素

(1)文本框

(2)密码框

(3)单选按钮 checked

(4)多选按钮

(5)普通按钮

(6)特殊按钮

(7)下拉列表

(8)文件

(9)隐藏域

(10)多行文本框

(11)时间控件

3,HTML5新增 type 类型

(1)email : HTML5的类型可以增加校验

(2)url:用于网址输入。

(3)color:用于颜色选择器。

(4)number:用于数值输入。

(5)range:用于滑动条类型的数值选择。

(6)date:用于日期选择。

(7)time: 用于时间选择。

(8)month:用于月份选择(只有月份和年份)。

(9)week:用于周选择(包含年份)

(10)search:用于搜索框,可以包含清除按钮。

(11)提交按钮

4,HTML5新增属性

(1)multiple:多选

(2) placehoder:默认提示   

(3)autofocus:自动获取焦点 

(4) required:必填项


三,form表单

           表单在 Web 网页中用来给访问者填写信息,从而能采集客户端信息,使网页具有交互的功能。一般是将表单设计在一个Html 文档中,当用户填写完信息后做提交(submit)操作,于是表单的内容就从客户端的浏览器传送到服务器上,经过服务器上程序处理后,再将用户所需信息传送回客户端的浏览器上,这样网页就具有了交互性。这里我们只讲怎样使用Html 标志来设计表单。

           所有的用户输入内容的地方都用表单来写,如登录注册、搜索框。

           一个表单一般应该包含用户填写信息的输入框,提交按钮等,这些输入框,按钮叫做控件,表单很像容器,它能够容纳各种各样的控件。

1,<form>表单

(1)定义

              form表单会采集包含的有效数据,提交到后端,进行交互

(2)action 属性

             提交到的地址      action =  " url / uri "

  • 地址栏信息:

http://127.0.0.1:8020/Form%E8%A1%A8%E5%8D%95/aaa?username=nana&pwd=123123

?之前是提交的资源的目标地址
?之后是提交的具体的数据 

http : 信息交互遵照协议 http协议
127.0.0.1  :代表本机的IP地址
8020 :Hbuilder内置服务器的端口号
Form%E8%A1%A8%E5%8D%95:指的是你的项目名字:Form表单
PS:浏览器的地址栏是不支持中文的,都会转成编码传送,如果你在地址栏看到中文,只是当前的那个浏览器给你一个友好的显示
PS:可以使用在线解析工具查看:urlencode
aaa:目标资源 --》去当前项目下找aaa了

?后的内容:
username=nana&pwd=123123
我们写的文本框,密码框等必须要加入一个属性:name
然后name属性和具体录入的信息会拼成一个键值对的形式,多个键值对之间 ,用&符号进行拼接

 PS:只有放在form表单中的内容才会被收集并提交

(3)method 属性

               提交方式,有get和post两种,默认为get

               get方式:提交数据可见,不安全提交,直接地址栏拼接传值;传参有长度限制;参数有类型要求;可以做数据缓存;各大浏览器厂商默认使用get提交方式
               post方式 :提交数据不可见,相对安全,打数据包发送;传参几乎没有长度限制;参数类型几乎没有要求;没有数据缓存

===扩展:"幂等"==》 同一个url就应该对应同一个响应结果。

2,表单元素

代码过长,分开截图!!所有内容都是如上图位置中的!!

(1)文本框

          【1】input标签 :使用很广泛,通过type属性的不同值,来表现不同的形态。

          【2】type="text"  文本框,里面文字可见

          【3】表单元素必须有一个属性:name 有了name才可以提交数据,才可以采集数据,然后提交的时候会以键值对的形式拼到一起。

          【4】value:就是文本框中的具体内容

          【5】键值对:name=value的形式

          【6】 如果value提前写好,那么默认效果就是value中内容。

                   一般默认提示语:用placeholder属性,不会用value--》value只是文本框中的值。

          【7】readonly只读:只是不能修改,但是其他操作都可以,可以正常提交

                    disabled禁用:完全不用,不能正常提交

 <!--文本框-->文本框<br />
<input type="text" name="uname"  placeholder="请录入身份证信息"/>
<input type="text" name="uname2" value="123123" readonly="true"/>
<input type="text" name="uname3" value="456456" disabled="disabled"/><br />

(2)密码框

          【1】效果录入信息不可见

          【2】type="password"

 <!--密码框-->密码框<br />
<input type="password" name="pwd"  /><br />

(3)单选按钮 checked

          【1】一组单选按钮,必须通过name属性来控制,让它们在一个分组中,然后在一个分组里只能选择一个.

          【2】正常状态下,提交数据为:gender=on ,后台不能区分你提交的数据, 不同的选项的value值要控制为不同,这样后台接收就可以区分了。

          【3】默认选中:checked="checked"

<!--单选按钮-->单选按钮<br />
<input type="radio" name="sex" value="1"checked/>男        
<input type="radio" name="sex" value="2"/>女<br /><!--选择按钮,利用name将其归为一组,属性和属性值相同可以留一个-->

(4)多选按钮

          【1】必须通过name属性来控制,让它们在一个分组中,然后在一个分组里可以选择多个不同的选项的value值要控制为不同,这样后台接收就可以区分了。

          【2】多个选项提交的时候,键值对用&符号进行拼接:例如下: favlan=1&favlan=3

          【3】默认选中:checked="checked"

<!--多选按钮-->多选按钮<br />
你喜欢的语言:
<input type="checkbox" name="favlan" value="1" checked="checked"/>java
<input type="checkbox" name="favlan" value="2" checked="checked"/>python
<input type="checkbox" name="favlan" value="3"/>php
<input type="checkbox" name="favlan" value="4"/>c#<br />

(5)普通按钮

              普通按钮没有什么效果,就是可以点击,以后学了js,可以加入事件

              <input type="button" value="普通按钮" />

<!--普通按钮-->
<input type="button" value="普通按钮" /><br />

 

(6)特殊按钮

          【1】重置按钮将页面恢复到初始状态     <input type="reset" />

          【2】图片按钮     <input type="image" src="../../img/VIP3.png" />

          【3】提交按钮:具备提交功能     <input type="submit" />

<!--特殊按钮-->特殊按钮<br />
重置按钮将页面恢复到初始状态<br />
<input type="reset" />
<br />图片按钮<br />
<img src="../../img/1.png" />
<input type="image" src="../../img/VIP3.png" />
<br />提交按钮:具备提交功能 <br />
<input type="submit" />
<br />

(7)下拉列表

          【1】默认选中:selected="selected"
          【2】多选:multiple="multiple"

<!--下拉列表-->下拉列表<br />
你喜欢的城市:
<select name="city" >
<option value="0">---请选择---</option>
<option value="1">哈尔滨市</option>
<option value="2" >青岛市</option>
<option value="3">郑州市</option>
<option value="4">西安市</option>
<option value="5">天津市</option>
</select>

 

(8)文件

             <input type="file" />

<!--文件-->文件域:<br />
<input type="file" name="fname" /><br />

(9)隐藏域

             <input type="hidden" name="uname6" value="123123" />

<!--隐藏框-->隐藏框<br />
<input type="hidden" name="hi" value="重要数据" /><br />

(10)多行文本框

              利用css样式来控制大小不可变:style="resize: none;"

<!--多行文本框-->多行文本框<br />
自我介绍:
<textarea style="resize: none;" rows="10" cols="30">请在这里填写信息。。</textarea>
<br />
<!--label标签 一般会在想要获得焦点的标签上加入一个id属性,然后label中的for属性跟id配合使用。-->
<label for="uname">用户名:</label><input type="text" name="uername" id="uname"/><br />

 

(11)时间控件

             <input type="date" name="dt" />

<!--时间控件-->时间控件<br /><input type="date" name="dt" />

 

3,HTML5新增 type 类型

(1)email : HTML5的类型可以增加校验

(2)url:用于网址输入。

(3)color:用于颜色选择器。

(4)number:用于数值输入。

                        min——最小值; max——最大值;

                        step——步长;value——默认值:一定在步长的范围中,否则不能提交

(5)range:用于滑动条类型的数值选择。

(6)date:用于日期选择。

(7)time: 用于时间选择。

(8)month:用于月份选择(只有月份和年份)。

(9)week:用于周选择(包含年份)

(10)search:用于搜索框,可以包含清除按钮。

(11)提交按钮

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><form action="" method="get"><!--email:html5的类型可以增加校验--><input type="email" name="email" /><br /><!--url--><input type="url" /><br /><!--color--><input type="color" /><br /><!--number:min:最小值max:最大值step:步长value:默认值:一定在步长的范围中,否则不能提交--><input type="number" min="1" max="10" step="3" value="4"/><br /><!--range-->1<input type="range" min="1" max="10" name="range" step="3"/>10<br /><!--date--><input type="date" /><br /><!--time--><input type="time" /><br /><!--month--><input type="month" /><br /><!--week--><input type="week" /><br /><!--searth--><input type="search"/><br /><!--提交按钮--><input type="submit" /><br /></form></body>
</html>

4,HTML5新增属性

(1)multiple:多选

           ——下拉列表

(2) placehoder:默认提示   

            ——文本框代码有使用

(3)autofocus:自动获取焦点 

(4) required:必填项

<input type="text" autofocus="autofocus"/>
<input type="text" required="required" />

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com