第二次前端培训（HTML)

表单

1. form标签表单标签块状元素，能自动换行将数据传递给服务器

常用属性：

action：表单提交的地址url（必须）

id ：唯一标识

name：名称（所有的标签都有id和name）

target：表单提交打开方式——是在当前窗口还是另外开一个窗口(默认当前窗口，故一般不用写这个属性)

method：提交方式，有两种get和post.（默认是get)

get和post提交方式的区别：

get请求：参数会直接跟在url后面，用问号拼接。安全性差，但是传递的数据量小，有缓存，效率高（是post速度的两倍）适合查找信息的时候用

post请求：参数不会直接跟在url地址栏后面，会放在请求体中。安全性高，传输数据量大，无缓存，速度相对慢适合添加，修改信息的时候用

2. input 标签（表单元素）用于搜集用户信息（注意：表单元素一般都需要设置name属性值，否则数据无法传递！！！）

常用属性：

type：表单元素的类型

text：文本框

password：密码框

radio：单选框（需要设置一组相同的name属性值）

checkbox：复选框（需要设置一组相同的name属性值）

button：普通按钮

hidden：隐藏域（用来存放需要传递给服务器，但不需要显示的数据）

file：文件域（上传文件）

date：时间

submit：提交按钮

reset：重置按钮

image：图片按钮（提交按钮）

value：表单元素的值

checked：是否选中（单选框/复选框）

disabled：是否禁用

maxlength：允许输入的最大字符

.......

基本功能参考代码：

<form action="#" id="myform" name="myform">编号:<input type="hidden" name="userId" value="1"/><br />密码:<input type="password" name="userPwd" maxlength="6"id="userName"/><br />性别:男<input type="radio" name="userSex" value="man" checked="checked"/>女<input type="radio" name="userSex" value="man" /><br />爱好：唱歌<input type="checkbox" name="userhobby" value="sing" disabled="disabled"/>跳舞<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="提交按钮"/><input type="image"  src="img/loii.PNG"/>
</form>

3.textarea标签

可通过cols和rows属性来规定文本框的尺寸（文本框所能看到的部分，可以输入很多数据，但是可见范围只有文本框大小，是有限的），cols规定文本框内的可见宽度，rows规定文本框的可见行数。它是一个双标签，同样它也是一个表单元素，需要写上name值。文本写在双标签之间，对比input，文本是写在input的value值里面。

例如：

简介：<textarea name="remark" cols="50" rows="5">111111</textarea>

4.label标签

label标签为input元素定义标注（标记）功能是聚焦

label标签的for属性应该与相关元素的id属性相同

<label for="userName">姓名</label>:<input type="text" name="userName" id="userName"/><br />

5.button标签

按钮(默认是提交按钮)

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

6.select标签

用于定义下拉列表

属性：

disabled：禁用该下拉框

multiple：规定可选择多个选项

size：规定下拉列表中可见选项的数目

name：规定下拉列表的名称

</select>

注：当option设置了属性值时，提交的数据是value对应的值，没有设置时，提交的是数据是文本值

<select name="city"><option>请选择城市</option>(默认选用第一个)<option>北京</option><option>上海</option><option>杭州</option>
</select>

常用字符实体

< &lt

> &gt

空格 &nbsp

版权符 &copy

注：1.不是在form标签里面的元素就是表单元素，表单元素基本上要设置name值，有的不需要，比如按钮。

2.input里面一般都需要设置type，name，value看情况（单选框，多选框，隐藏框必须设置value）

3.type，value是设置给用户看的，name是传递给服务器的。

第二次前端培训（HTML)相关推荐

props写法_好程序员web前端培训React中事件的写法总结
好程序员web前端培训React中事件的写法总结,React的事件处理和DOM元素很相似,但是语法上是有不同的: 1.react事件采用驼峰命名法,而不是纯小写. 驼峰命名法(camelCase):命 ...
小白前端学习流程【爱创课堂专业前端培训】
对于零基础非科班的同学来说,一个良好的前端学习流程和学习误区是需要我们去规避和计划的,爱创课堂目前专注于前端培训,总结了以下几点,给大家一个参考. 在开始学习之前你需要做到以下5点: 第一:需要达到什 ...
前端培训的机构哪个好，这五类人最适合转Web前端
互联网的高速发展促使互联网企业对于网站等页面的用户体验要求也越来越高,导致网站开发难度越来越大,于是一个新兴职业应运而生--web前端工程师. 因为互联网时代的高速发展,公司企业的迫切需求web前端工 ...
网页前端培训（HTML）
1.安装编译器网址:HBuilderX-高效极客技巧选择windows标准版 2. HTML基础学习网址: 1.HTML 基础 | 菜鸟教程 2.[优极限] HTML+CSS+JavaScrip ...
web前端培训需要学多久
web前端是现在移动互联网行业必需的一个岗位,想要学习web前端技术,参加web前端培训机构是最好的选择,那么web前端培训需要学多久呢?看看下面的介绍就知道了. web前端培训需要学多久? 第一个阶 ...
初学者前端培训机构需要注意什么
初学者前端培训机构选择需要注意什么?随着企业对前端开发技术人才的需求量逐渐增多,现在市场上前端培训机构越来越多,但是小伙伴想要判断出一个培训机构的好坏,避免被坑需要注意以下几个地方: 第一点:判断前端 ...
web前端培训分享：面向对象中类和对象的定义是什么?
在学习web前端技术的时候,我们接触的最多的便是面向对象这一块,其实很多编程技术都有用到这个现象,下面我们就为大家详细的介绍一下面向对象中类和对象的定义是什么? web前端培训分享:面向对象中类和对象 ...
哪些人适合学web前端培训呢
哪些人适合学web前端培训呢?经常会有人问到这个问题,因为互联网对于很多人来说是非常具有诱惑力的,前端便是其中的一种互联网技术,那么针对这个问题,我们来看看下面的详细介绍吧. 哪些人适合学web前端培 ...
web前端培训要学多久
近几年web前端在互联网行业的快速发展,很多人都对web前端是非常感兴趣的,学习web前端技术的人越来越多,那么参加web前端培训要学多久呢?相信大家都想知道这个答案,我们来看看下面的详细介绍. ...

第二次前端培训（HTML)

表单

常用字符实体

第二次前端培训（HTML)相关推荐

最新文章

热门文章