第二次网页前端培训（HTML）

轻大Klein

已于 2022-02-04 15:53:12 修改

阅读量545

点赞数

分类专栏： HTML 文章标签： html 前端 javascript

于 2022-02-04 14:38:06 首次发布

本文链接：https://blog.csdn.net/m0_54055385/article/details/122782645

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1. 视频链接

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

2. 教程链接

HTML 表单 | 菜鸟教程

3. 表单

3.1 form

表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

form标签用于为用户输入创建HTML表单。
表单能够包含input 元素，比如文本字段、复选框、单选框、提交按钮等等。还可以包含textarea等元素。表单用于向服务器传输数据。form元素是块级元素，其前后会产生折行。

method:表单提交方式: get.post get常用于搜索 post常用于提交上传等

get:默认，主动的获取方式，数据放在url上，数据的容量有限，安全性差，有缓存

post:数据放在请求实体中，数据量理论上没有限制，相对安全，没有缓存

3.2 input

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

每一个表单必须具有name和id，单选框标签radio，比如性别：男女二选一时，就需要设置这两个radio的name相同才能保证不能同时被选中。复选框标签checkbox，name也需要设置相同。

实例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>表单及表单元素</title>
	</head>
	<body>
		<form action="#" method="get" id="myform" name="myform">
			编号：<input type="hidden" name="userid" value="1" /> <br />
			姓名：<input type="text" value="zhangsan" 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" /> <br />
				跳舞<input type="checkbox" name="userHobby"  value="dance"/> <br />
				说唱<input type="checkbox" name="userHobby"  value="rap"/> <br />
			生日：<input type="date" name="userData"  /> <br />
			头像：<input type="file" name="userHead" /> <br />
			<input type="button" value="普通按钮" />
			<input type="reset" value="重置按钮" />
			<input type="submit" value="提交按钮" />
			<input type="image" src="img/baidu.png" />
		</form>
	</body>
</html>

实例效果：

3.3 textarea

该标签定义多行的文本输入控件。文本区中可容纳无限数量的文本，可以通过cols和rows属性来规定textarea的尺寸。cols规定文本区内的可见宽度。rows规定文本区内的可见行数。

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

3.4 label

label标签为input元素定义标注（标记)。label元素不会呈现任何的特殊效果。
label标签的 for属性应当与相关元素的id属性相同，此时点击label标签会自动为元素聚焦

3.5 button

实例代码

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

3.6 select

select用于定义下拉列表

实例代码：

城市：
				<select name="city">
					<option>请选择城市</option>
					<option value="beijing">北京</option>
					<option value="shanghai">上海</option>
					<option value="hangzhou">杭州</option>
				</select>

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

4.常用字符实体

        在HTML中，某些字符是预留的。
        在HTML中不能使用小于号(<）和大于号(>)，这是因为浏览器会误认为它们是标签。
        如果希望正确地显示预留字符，我们必须在HTML源代码中使用字符实体(character entities)。实体名称对大小写敏感!

5.实践补充（onfocus，onblur，onclick）

当 input 输入框获取焦点时执行一段 Javascript代码：

onfocus 事件在对象获得焦点时发生。

Onfocus 通常用于 <input>, <select>, 和<a>.

提示： onfocus 事件的相反事件为 onblur 事件。

实例：

<input type="text" value="请输入关键字" name="sousuo" style="width: 150px; height: 25px;"value="请输入关键字"  onfocus="if (this.value === '请输入关键字') { this.value = ''; }" onblur="if (this.value === '') { this.value = '请输入关键字'; }" />

效果：

鼠标点击（聚集时）请输入关键字会消失变为空，失去聚焦时如果搜索框中为空，则又变回请输入关键字

onclick

鼠标点击事件：当按钮被点击时执行Javascript代码：

实例：点击上图输入框旁边的搜索图标时就会执行Javascript代码，跳转至相应界面

<input type="image" name="search" src="../img/搜索.png" onclick='window.open("http://www.zzuli.edu.cn/_web/_search/api/search/new.rst?locale=zh_CN&request_locale=zh_CN&_p=YXM9NSZ0PTE0MTgmZD0zOTkwJnA9MSZtPVNOJg__")'/>

轻大Klein

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第二次网页前端培训（HTML）

1. 视频链接【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibili2. 教程链接HTML 表单 | 菜鸟教程3. 表单3.1 form表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。form标签用于为用户输入创建HTML表单。表单能够包含inpu...
复制链接

扫一扫