HTML:表单

最新推荐文章于 2024-09-08 19:45:37 发布

0cfjg0

最新推荐文章于 2024-09-08 19:45:37 发布

阅读量245

点赞数 4

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

本文链接：https://blog.csdn.net/qq_55630615/article/details/138059613

版权

前端技术专栏收录该内容

17 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML表单的基础元素，如input（文本、密码、单选/复选框、隐藏域等），表单属性（action、target、method），以及如何使用按钮、下拉框、禁用状态和label、fieldset与legend进行交互设计。

摘要由CSDN通过智能技术生成

表单

网页中的一个交互区域

form表单标签属性

action:选择将表单传递给谁处理

target:选择跳到那个页面(_self/_blank…)

method:选择请求方式(get/post)

get:默认

请求参数会拼接在url之后,长度限制4kb

post

浏览器会将数据放入http请求信息体

请求参数无限制

input输入控件

文本输入框

<input type="text">

type="text"表示为输入框 ,name属性中传入接收方规定的参数

value代表输入框中的默认值

maxlength属性代表输入的最大长度

文本域

<textarea>

name

cols=每行显示的字符数

rows=正常情况下显示的行数

密码输入框

<input type="password">

属性同上,隐藏输入

代码如下

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="https://www.baidu.com/s" target="_self" method="get">
        <!-- action选择将表单传给谁处理 -->
        <!-- target选择跳到哪个页面 -->
        <!-- method选择请求方式 -->
        <input type="text" name="wd" id="">
        <!-- 输入框 name中需要传递接收方规定的参数 -->
        <button>搜索</button>
        <!-- 按钮 -->
    </form>
    <form action="https://search.jd.com/search" target="_blank">
        <!-- 选择将表单传给谁处理 -->
        <input type="text" name="keyword" id="">
        <!-- 输入框 name中需要传递接收方规定的参数 -->
        <button>搜索</button>
        <!-- 按钮 -->
    </form>
    <form action="">
        账户: <input type="text" name ="account" value="ooo" maxlength="10"><br>
        密码: <input type="password" name ="password" value="123"><br>
        <button>确认</button>
    </form>
</body>
</html>

单选框

<input type="radio">

name:表单提交的属性名字

value:表单提交的属性值

checked:默认勾选

复选框

<input type="checkbox">

name:表单提交的属性名字

value:表单提交的属性值

checked:默认勾选

表单隐藏域

<input type="hidden">

name:表单提交的属性名字

value:表单提交的属性值

用来检查非法输入

按钮

button按钮控件

<input type="submit">//提交
<input type="reset">//重置
<input type="button">//按钮,需要绑定监听使用
<button>按钮</button>

不要指定name

button默认为submit

input标签用value指定按钮的文字

下拉框

<select>
	<option>

select中name属性值加option中的value属性值=表单提交的值

如果没有设置value属性值,则提交的是option中的文字

禁用表单控件

属性设置disabled

label标签

<label for=""></label>

for属性对应其他控件的id,关联后点击label文字使控件获得焦点

或者

<label>
    <input>
</label>

fieldset和legend

对表单信息进行分类

<fieldset>
    <legend>
        描述
    </legend>
   	控件.........
</fieldset>

0cfjg0

关注

4
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
HTML:表单

网页中的一个交互区域。
复制链接

扫一扫

专栏目录