6、表单

最新推荐文章于 2023-11-11 23:11:37 发布

青叶的全栈之路

最新推荐文章于 2023-11-11 23:11:37 发布

阅读量126

点赞数

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

本文链接：https://blog.csdn.net/dream_AI/article/details/107070789

版权

Web前端专栏收录该内容

16 篇文章 2 订阅

订阅专栏

表单

<form>标签
<input>标签
<select>标签
<textarea>标签

一、<form>标签

1.1、说明

主要用于提交表单数据的。

1.2、属性

action：提交表单数据的URL
name：表单名称
method：表单项提交方式。
1. get：请求参数会显示在地址栏中。请求参数的长度是有限制的。不太安全。
2. post：请求参数不会显示在地址栏中，被封装在请求体中。请求参数的长度没有限制。相对安全。
3. …总共7种
target：

1.3、使用

<body>
    <form method="get" action="#"><!--#代表提交到本地-->
        <input name="user" type="text"><!--input必须给name属性-->
        <input value="提交" type="button">
    </form>
</body>

二、<input>标签

2.1、说明

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

2.2、属性

name：定义<input>的名称
value：初始化<input>标签的值
type
1. text：文本输入框
2. password：密码输入框
3. radio：单选框。每个单选框具有相同的name和不同value值。
4. checkbox：复选框。每个复选框具有相同的name和不同value值。
5. hidden：隐藏域，不会显示在网页中的表单，但是却会被提交数据。
6. submit：提交按钮
7. image：图片提交按钮【src属性----url】
8. button：普通按钮
9. reset：重置按钮
10. file：文件选择按钮
  
  ------------------HTML5新特性---------------
11. color：取色器
12. date：日期
13. datetime-local：日期时间
14. email：邮箱，自带邮箱格式验证。
15. number：文本输入框，但是只能输入数字
checked：单选/复选框的默认值。【不需要给值】
placeholder：文本框/密码框的默认值，输入消失。

<lable><lable>：用于将文字和<input>关联起来，具体使用参考下面的案例

2.3、使用

<body>
	<form method="get" action="#">
		<label for="userName">用户名：</label>
		<input type="text" name="userName" placeholder="请输入用户名" id="userName"><br/>
		<label for="password">用户名：</label>
		<input type="password" name="password" placeholder="请输入密码" id="password"><br/>
		性&emsp;别：<!--&emsp;是制表符的转义-->
		男 <input type="radio" name="grand" value="男" checked>&emsp;
		女 <input type="radio" name="grand" value="女"><br/>
		年&emsp;龄：<input type="number" name="age" placeholder="请输入年龄"><br/>
		兴&emsp;趣：
		游戏 <input type="checkbox" name="like" value="游戏">&emsp;
		体育 <input type="checkbox" name="like" value="体育">&emsp;
		看书 <input type="checkbox" name="like" value="看书" checked><br/>
		隐藏域：<input type="hidden" name="hidden" value="surprize"><br/>
		图片提交：<input type="image" src="./提交按钮.png" width="100px"><br/>
		文件提交：<input type="file" name="file"><br/>
		<input type="submit" value="提交">
		<input type="reset" value="重置">
		<input type="button" value="普通按钮"><br/>
		拾色器：<input type="color" name="color" value="red"><br/>
		日&emsp;期：<input type="date" name="birthday1"><br/>
		日期时间：<input type="datetime-local" name="birthday2"><br/><!--火狐不支持-->
		邮&emsp;箱：<input type="email" name="email" placeholder="请输入邮箱">
	</form>
</body>

三、<select>标签

3.1、说明

<select>标签用于定义下拉列表。

3.2、属性

<select>标签
- name：下拉列表的名字
- size：下拉列表最多同时显示的选项个数。这东西会让下拉列表自动打开无法收缩。
<option>标签
- selected：该选项为下拉列表的初始值。【不用赋值】
- value：下拉列表实际提交的值

3.3、使用

<body>
	<form method="get" action="#">
		省&emsp;份：
		<select name="provoince">
		<option value="0">--请选择--</option>
		<option value="1" selected>北京</option><!--初始值-->
		<option value="2">上海</option>
		<option value="3">广州</option>
		<option value="4">深圳</option>
		<option value="5">杭州</option>
		<option value="6">成都</option>
		<option value="7">武汉</option>
		</select>
    </form>
</body>

四、<textarea>标签

4.1、说明

<textarea> 标签定义多行的文本输入控件。文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。可以通过 cols 和 rows 属性来规定 textarea 的尺寸。CSS也行

4.2、属性

name：文本域的名称
cols：一行显示多少个字符
rows：显示多少行，显示行数并不代表容纳行数。
maxlength：HTML5新特性。设置该文本域的最大字符数。
readonly：只读文本域
required：HTML5新特性。该文本域不能为空。
placeholder：文本域初始值，输入消失。

4.3、使用

<body>
	<form method="get" action="#">
		简&emsp;介：
        <textarea name="message" cols="20" rows="5">文本域中的初始值</textarea>
    </form>
</body>

青叶的全栈之路

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
6、表单

表单<form>标签<input>标签<select>标签<textarea>标签一、<form>标签1.1、说明主要用于提交表单数据的。1.2、属性action：提交表单数据的URLname：表单名称method：表单项提交方式。get：请求参数会显示在地址栏中。请求参数的长度是有限制的。不太安全。post：请求参数不会显示在地址栏中，被封装在请求体中。请求参数的长度没有限制。相对安全。…总共7种
复制链接

扫一扫