ICode9

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

第二次网页前端培训笔记(表单)

2022-02-05 20:33:11  阅读:99  来源: 互联网

标签:网页 标签 元素 笔记 表单 nbsp 提交 按钮


一,表单标签

1,form标签

表单标签,块级元素,会自动换行将数据传输给服务器。

常用属性:

action: 表单提交的地址url

id : 唯一标识

name : 名称

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

method 提交方式:

get请求:参数会直接跟在url后面,用问号拼接。安全性差,传递的数据量小,效率高(是post速度的二倍),有缓存。

post请求:

参数不会跟在url地址栏后面,会放在请求体重,安全性高,传输数据量大,速度相对慢,无缓存

二,表单元素标签(要设置name属性值,否则数据无法传递)

1,input元素

type :表单元素的类型

text文本框,password密码框,radio单选框(需要设置一组相同的name属性值),checkbox复选框,button 普通按钮,hidden隐藏域(用来存放需要传递给服务器,但不需要显示的数据),file文件域(上传文件),date日期框,submit提交按钮,reset重置按钮,image图片按钮(提交按钮)

value : 表单元素的值

checked:是否选中(单选框/复选框)

disabled:是否禁用

maxlength:允许输入的最大字符串

<form action="#" method="get" id="myform" name="muform">
		编号:<input type="hidden" name="userId" value="1"/><br>
		姓名:<input type="text" value="" name="userName"/><br>
		密码:<input type="password" name="userPwd"/><br>
		性别:男:<input type="radio" name="userSex" value="man"/>
		     女:<input type="radio" name="userSex" value="woman"/><br>
		爱好:唱歌:<input type="checkbox" name="userHobby" value="sing"/>
		     跳舞:<input type="checkbox" name="userHobby" value="dance"/>
			 说唱:<input type="checkbox" name="userHobby" value="rap"/><br>
		生日:<input type="date" name="userDate" /><br>
		头像:<input type="file" name="userHead" /><br>
		<input type="button" value="普通按钮"/>
		<input type="reset" value="重置按钮"/>
		<input type="submit" value="提交按钮"/>
		</form>

2,textarea文本域

cols和rows 

简介:<textarea name="remark" rows="5" cols="50">11111</textarea>

3, label标签

设置label标签的for属性值与表单元素的id属性值对应,当点击labl标签时,会给表单元素聚焦

4,button按钮

type:button(普通按钮),submit(提交按钮,默认值),reset(重置按钮)

        <button type="button">普通按钮</button>
		<button type="submit">提交按钮</button>
		<button type="reset">重置按钮</button>

 

5,select下拉选项

<select name=" ">

       <option value="值">文本</option>

</select>

disabled:禁用该下拉框

multiple:规定可选择多个选项

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

<select name="city">
			<option>请选择城市</option>
			<option value="Beijing">北京</option>
			<option value="Shanghai">上海</option>
			<option value="Hangzhou">杭州</option>
		</select>

 

 

 

三, 常用字符实体

< :&lt;

>:&gt;

空格:&nbsp;

版权符:&copy;

 

&lt;h2&gt;Hello&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&copy world&lt;/h2&gt

 

 

 

标签:网页,标签,元素,笔记,表单,nbsp,提交,按钮
来源: https://blog.csdn.net/zjygzzk/article/details/122791871

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

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

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

ICode9版权所有