ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

第二次网页前端培训笔记(HTML P4-P7)

2022-02-04 18:34:35  阅读:197  来源: 互联网

标签:P7 P4 button 元素 HTML nbsp 提交 按钮 input


学习网址:

​​​​​​【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程,小白教学,前端基础全套完成版_哔哩哔哩_bilibili


1.表单标签

form标签

  •                块级元素,会自动换行;将数据传输给服务器;

  •                 常用属性:

                                         action:表单提交的地址;

                                                 id:唯一标识;

                                          name: 名称

                                          target:表单提交打开方式(当前窗口)

                                        method:提交方式

                                                         ——get请求:参数会直接跟在url之后,用问号拼接;

                                                                                    安全性差,传递数据量小,效率高(是post                                                                                 的两倍),有缓存。

                                                         ——post请求:参数不会跟在url地址栏后面秒内,会放在请                                                                                求体中;

                                                                                     安全性高,传输数据量大,速度来说相对                                                                                     慢,无缓存。

         1))).   input元素

  •            input标签用于搜集用户信息;根据不同的type属性值,输入字段拥有很多形式;输入字段可以使文本字段、复选框、单选按钮、按钮等。

  •              常用属性

属性描述
alttext(文本框)定义图像输入的代替文本。
checkedchecked规定此input元素首次加载时应当被选中。
disableddisabled当input元素加载时禁用此元素。
readonlyreadonly规定输入字段为只读。
maxlengthnumber规定输入字段中的字符的最大长度。
valuevalue规定input元素的值
type

button <br>(普通按钮)

checkbox <br>(复选框)

file <br>(文件域<上传文件>)

hidden <br>(隐藏域<用来存放需要传递给服务器,但不需要显示的数据>)

image <br>(图片按钮)

password (密码框)<br>

radio <br>((单选框)

reset <br>(重置按钮)

submit <br>

text

规定input元素的类型。

  •                应用举例

		<form action="#" method="get" id="myform" name="myform"></form>
		编号:<input type="hidden" name="userID" value="1" /><br>
		姓名:<input type="text" name="" id="" value="" /><br>
		密码:<input type="password" name="username" /><br>
		性别:男<input type="radio" name="usersex" value="man" checked="checked"/>
		     女<input type="radio" name="usersex" value="woman"/><br>
		爱好:唱歌<input type="checkbox" name="UserPwd" value="sing"/>
		     跳舞<input type="checkbox" name="UserPwd" value="dance"/>
			 说唱<input type="checkbox" name="UserPwd" value="rap"/><br>
		头像:<input type="file" name="UserHead" /><br>
		生日:<input type="date" name="UserDate" /><br>
		简介:<textarea name="remark">111111</textarea><br>
		<input  type="button" value="普通按钮" />
		<input type="reset" value="重置按钮"/>
		<input type="submit" value="提交按钮"/>
		

                         演示结果:

          2))).   textarea文本域

                            cols  和  rows

          3))).   label标签

           4))).   button按钮(默认提交按钮)

                       button(普通按钮)

<button>提交按钮</button>

若要改变,在里面加type: button(普通按钮)//     submit(提交按钮)(默认值)//    reset(重置按钮)

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

           5))).   select下拉选项()

注:当option设置了value属性时,提交的数据是 value对应的值;如果未设置value,则提交的数据是文本值;

size可设置下拉框一次性可显示的个数;

disabled可禁用选项;

城市:
		<select name="city">
			<option>请选择城市</option>
			<option>北京</option>
			<option>上海</option>
			<option>广州</option>
			<option>深圳</option>
		</select>


 2.常用字符实体

符号对应代码
<&lt
>&gt
/n&nbsp
版权符&copy
&lt;h2&gt;hello&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&copy;world


 3.标签的分类

(1)块状元素

(2)行内元素

(3)行内块状元素

 

标签:P7,P4,button,元素,HTML,nbsp,提交,按钮,input
来源: https://blog.csdn.net/prtinf48_9/article/details/122783776

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有