网页前端培训笔记2

空景 Sadnes╰つ677

已于 2022-02-05 11:59:57 修改

阅读量253

点赞数 2

文章标签：前端 javascript html

于 2022-02-04 18:19:29 首次发布

本文链接：https://blog.csdn.net/qq_63202674/article/details/122784841

版权

form

input

textarea

label

button

字符实体

代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>表单及表单元素</title>
	</head>
	<body>
		<!--
			form 标签
				——表单标签，块级元素，会自动换行
				—将数据传输给服务器。
				
				—常用属性:
				——action·-表单提交的地址url
				-id.-——唯一标识
				-name .···名称
				一target··表单提交打开方式(当前窗口)
				
				-method·提交方式
				get请求(默认get)
				    —参数会自接眼在ur1后面,用问号拼接。
				    —安全性差。传递的数据量小，效率高(是post速度的两倍)，有缓存
				post请求
				    —参数不会旅在url地址栏后面，会放在请求体中。安全性高,传输数据量大,速度相对来说漫，无缓存。
		-->
					<!--#提交到当前-->
			<form action="#" method="get" id="myform" name="myform">
				<!--
				表单元素需要设置name属性值，否则数据无法传递！！！
				input元素
					type表单元素的类型
						text文本框
						password密码框
						radio单选框〔需要设置一组相同的name属性值)
						checkbox复选框（需要设置一组相同的name属性值)
						button普通按钮
						hidden隐藏域〔用来存放需要传递给服务器，但不需要显示的数据)
						file文件域(上传文件)
						date日期框
						submit提交按钮
						reset重置按钮
						image图片按钮(提交按钮)
						value表单元素的值
						checked是否选中(单选框/复选框)
						disabled 是否禁用
						maxlength允许输入的最大字符
					textarea文本域
						cols和rowslabel标签
					设置label标签的for属性值与表单元素的id属性值对应，当点击label标签时，会自动给表单元素聚焦
				button按钮
					type
						button普通按钮
						submit提交按钮（默认值)
						reset重置按钮
					select下拉选项
						<select name="">
						   <option value="值">文本</ option>
						</select>
						注:当option设置了value属性值时，提交的数据是value对应的值;
						   如果未设置value，则提交的数据是文本值
				常用属性:
					value设置值
					selected-设置选中状态
				
				-->
				编号:<input type="hidden" name="userId" value="1" /> <br>
				姓名:<input type="text" value="zhangsan" name="userName" /><br>
				密码：<input type="password" name="userPwd" maxlength="6" /><br>
				性别：男 <input type="radio" name="userSex" value="man"checked="checked" />
					女 <input type="radio" name="userSex" value="woman"checked="checked" /><br>
				爱好:唱歌<input type="checkbox" name="userHobby" value="sing"/>
					跳舞<input type="checkbox" name="userHobby" value="dance" checked />
					说唱<input type="checkbox" name="userHobby" value="rap" disabled="disabled"/>
					生日: <input type="date" name="userDate" / ><br>
				    简介：<textarea name="remark" rows="10">简介</textarea>
					头像:<input type="file" name="userHead" /><br>
					城市:<select name="city">
						<!--加上multiple="multiple"可多选-->
						<option >请选择城市</option>
						<option value="Beijing">北京</option>
						<option value="shanghai">上海</option>
						</option><option value="Hangzhou">杭州</option>
						</select>
						<br>
					<input type="button" value="普通按钮"/>
					<input type="reset" value="重置按钮"/>
					<input type="submit" value="提交按钮"/>
					<input type="image" src="./img/8567123.jpg" / width="30%" height="30%">
			</form>
				
	</body>
</html>

代码结果

其他补充（来源菜鸟）

HTML 表格和边框属性

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。

使用边框属性来显示一个带有边框的表格：

<table border="1">

<tr>

         <td>Row 1, cell 1</td>

            <td>Row 1, cell 2</td>

       </tr>

</table>

HTML 表格表头

表格的表头使用 <th> 标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本：

<table border="1">

        <tr>

                <th>Header 1</th>

                 <th>Header 2</th>

        </tr>

         <tr>

                <td>row 1, cell 1</td>

                <td>row 1, cell 2</td>

        </tr>

         <tr>

                 <td>row 2, cell 1</td>

                 <td>row 2, cell 2</td>

         </tr>

</table>

HTML 表单

表单是一个包含表单元素的区域。

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

表单使用表单标签 <form> 来设置:

<form>
.
input 元素
.
</form>

HTML 表单 - 输入元素

多数情况下被用到的表单标签是输入标签（<input>）。

输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：

文本域（Text Fields）

文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

浏览器显示如下：

First name:
Last name:

注意:表单本身并不可见。同时，在大多数浏览器中，文本域的默认宽度是 20 个字符。

密码字段

密码字段通过标签<input type="password"> 来定义:

<form>
Password: <input type="password" name="pwd">
</form>

浏览器显示效果如下:

Password:

注意:密码字段字符不会明文显示，而是以星号或圆点替代。

单选按钮（Radio Buttons）

<input type="radio"> 标签定义了表单单选框选项

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

浏览器显示效果如下:

Male
Female

复选框（Checkboxes）

<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>

浏览器显示效果如下:

I have a bike
I have a car

提交按钮(Submit Button)

<input type="submit"> 定义了提交按钮.

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

浏览器显示效果如下:

HTML 表单标签

New : HTML5新标签

标签	描述
<form>	定义供用户输入的表单
<input>	定义输入域
<textarea>	定义文本域 (一个多行的输入控件)
<label>	定义了 <input> 元素的标签，一般为输入标题
<fieldset>	定义了一组相关的表单元素，并使用外框包含起来
<legend>	定义了 <fieldset> 元素的标题
<select>	定义了下拉选项列表
<optgroup>	定义选项组
<option>	定义下拉列表中的选项
<button>	定义一个点击按钮
<datalist>New	指定一个预先定义的输入控件选项列表
<keygen>New	定义了表单的密钥对生成器字段
<output>New	定义一个计算结果