前端，表单基础知识详解
来源：互联网 发布：数据手册 编辑：程序博客网 时间：2024/05/27 10:43
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="表单.css">
<title></title>
</head>
<body>
<!-- form：定义表单元素，自身带有提交功能,默认提交到当前页面-->
<!-- action:表示要提交到的页面。 -->
<!-- method:设置请求方式。POST GET 两种，默认是GET -->
<!-- target:设置提交时的目标位置。_self,_blank,_top,_parent -->
<!-- id：在这里给一个值用于表单挂钩 -->
<!-- autocompaete:设置浏览器记住用户输入的数据,实现自动填充表单。默认为on提示输入内容，设置为off不提示
（也可以单独给某个input元素添加该属性）-->
<form class="" action="http://www.baidu.com" method="post" target="_blank"
id="login" autocomplete="on">
<!--控件input：表示用来收集用户输入的数据的控件 -->
用户名1:<input><br>
<!-- input属性值之autofocus：让光标聚焦在某个input元素上，让用户直接输入 -->
用户名2:<input autofocus><br>
<!-- input属性之disabled：禁用input元素 -->
用户名3:<input disabled><br>
<!--input属性之autocomplete:是否自动填充提示填充内容（on提示，off不提示） -->
用户名4:<input autocomplete="on"><br>
<!-- input属性之name:给input元素起名，以便接收相应的值 -->
用户名5:<input name="username" ><br>
<!-- input属性之type:定义了input元素的种类 -->
<!-- text:常规文本输入 -->
种类1:<input type="text"><br>
<!-- radio定义单选按钮 -->
种类2:<input type="radio"><br>
<!-- submit:定义提交按钮（提交表单） -->
种类3:<input type="submit"><br>
<!-- checkbox:定义复选按钮 -->
种类4: <input type="checkbox">men
<input type="checkbox">women
<input type="checkbox">both <br>
<!-- password：密码字段，字符不会显示明文，而是以星号或者圆点代替 -->
种类5:<input type="password"><br>
</form>
<!-- input属性之form:让表单外的元素和指定表单挂钩 -->
用户名6：<input form="login" type="submit"><br>
<form action="http://www.baidu.com" target="_blank">
<!-- 控件lable:使lable和input标签关联，点击label标签，就可以让光标跳到对应的input标签 -->
<!-- label使用方法一：设置for属性，与input中id属性值相对应，进行挂钩 -->
<label for="pwd">密码：</label>
<input type="password"id="pwd"><br>
<!-- lable使用方法二：标签中设置input标签 -->
<label>
电子邮件：<input form="login" name="email"><br>
</label>
<!-- 控件button:按钮，提交功能 -->
<!-- type属性值如下：
1.submit：表示按钮的作用是提交表单，默认
2.reset表示按钮的作用是重置表单。
3.button：表示按钮为一般按钮，没有任何作用-->
<!-- formaction:当type值为submit时，formaction属性将会覆盖表单form元素中的action属性 -->
<button type="submit" formaction="http://www.hao123.com" formmethod="post" formtarget="_self">提交</button><br>
<!-- 控件filedset:对表单进行编组。filedset可以将一些表单元素组织在一起，形成一个整体 -->
<!-- name:给分组定义一个名称 -->
<!-- form；让表单外的分组与表单挂钩 -->
<!-- disable：禁用分组内表单 -->
<fieldset disabled>
UserName:<input type="text"><br>
PassWord:<input type="password"><br>
</fieldset>
<fieldset>
<!-- 控件legend：添加分组说明标签，给分组上添加一个标题 -->
<legend>请登录</legend>
UserName:<input type="text"><br>
PassWord:<input type="password"><br>
</fieldset>
</form>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="表单.css">
<title></title>
</head>
<body>
<!-- form：定义表单元素，自身带有提交功能,默认提交到当前页面-->
<!-- action:表示要提交到的页面。 -->
<!-- method:设置请求方式。POST GET 两种，默认是GET -->
<!-- target:设置提交时的目标位置。_self,_blank,_top,_parent -->
<!-- id：在这里给一个值用于表单挂钩 -->
<!-- autocompaete:设置浏览器记住用户输入的数据,实现自动填充表单。默认为on提示输入内容，设置为off不提示
（也可以单独给某个input元素添加该属性）-->
<form class="" action="http://www.baidu.com" method="post" target="_blank"
id="login" autocomplete="on">
<!--控件input：表示用来收集用户输入的数据的控件 -->
用户名1:<input><br>
<!-- input属性值之autofocus：让光标聚焦在某个input元素上，让用户直接输入 -->
用户名2:<input autofocus><br>
<!-- input属性之disabled：禁用input元素 -->
用户名3:<input disabled><br>
<!--input属性之autocomplete:是否自动填充提示填充内容（on提示，off不提示） -->
用户名4:<input autocomplete="on"><br>
<!-- input属性之name:给input元素起名，以便接收相应的值 -->
用户名5:<input name="username" ><br>
<!-- input属性之type:定义了input元素的种类 -->
<!-- text:常规文本输入 -->
种类1:<input type="text"><br>
<!-- radio定义单选按钮 -->
种类2:<input type="radio"><br>
<!-- submit:定义提交按钮（提交表单） -->
种类3:<input type="submit"><br>
<!-- checkbox:定义复选按钮 -->
种类4: <input type="checkbox">men
<input type="checkbox">women
<input type="checkbox">both <br>
<!-- password：密码字段，字符不会显示明文，而是以星号或者圆点代替 -->
种类5:<input type="password"><br>
</form>
<!-- input属性之form:让表单外的元素和指定表单挂钩 -->
用户名6：<input form="login" type="submit"><br>
<form action="http://www.baidu.com" target="_blank">
<!-- 控件lable:使lable和input标签关联，点击label标签，就可以让光标跳到对应的input标签 -->
<!-- label使用方法一：设置for属性，与input中id属性值相对应，进行挂钩 -->
<label for="pwd">密码：</label>
<input type="password"id="pwd"><br>
<!-- lable使用方法二：标签中设置input标签 -->
<label>
电子邮件：<input form="login" name="email"><br>
</label>
<!-- 控件button:按钮，提交功能 -->
<!-- type属性值如下：
1.submit：表示按钮的作用是提交表单，默认
2.reset表示按钮的作用是重置表单。
3.button：表示按钮为一般按钮，没有任何作用-->
<!-- formaction:当type值为submit时，formaction属性将会覆盖表单form元素中的action属性 -->
<button type="submit" formaction="http://www.hao123.com" formmethod="post" formtarget="_self">提交</button><br>
<!-- 控件filedset:对表单进行编组。filedset可以将一些表单元素组织在一起，形成一个整体 -->
<!-- name:给分组定义一个名称 -->
<!-- form；让表单外的分组与表单挂钩 -->
<!-- disable：禁用分组内表单 -->
<fieldset disabled>
UserName:<input type="text"><br>
PassWord:<input type="password"><br>
</fieldset>
<fieldset>
<!-- 控件legend：添加分组说明标签，给分组上添加一个标题 -->
<legend>请登录</legend>
UserName:<input type="text"><br>
PassWord:<input type="password"><br>
</fieldset>
</form>
0 0
- 前端，表单基础知识详解
- Web前端(表单)基础知识笔记(3)
- 前端基础知识
- 前端基础知识
- 前端基础知识
- 前端基础知识
- 前端基础知识
- 前端基础知识
- 前端基础知识
- 前端表单
- 前端开发日记之form表单name属性详解
- html表单:HTML表单基础知识
- Html的表单基础知识
- 表单的基础知识
- bootstrap 基础知识（表单）
- JavaScript：表单基础知识
- background，表单基础知识总结
- 表单（一）基础知识
- Android 小项目之---Toast对象详细使用
- Android动态加载技术 简单易懂的介绍方式
- java自学之路3
- 安装使用zeromq
- Android 小項目之---标准体重测量仪：Bundle对象的实现
- 前端，表单基础知识详解
- 简单的霓虹灯效果
- HDU 2061 Treasure the new start, freshmen!（GPA的计算）
- 深入理解Java HelloWorld
- Andorid小项目之--Animation四种动画的图片效果
- 数据结构示例之单链表删除元素
- 剑指offer-按之字形顺序打印二叉树
- Java开发工具_Eclipse导入项目要注意的小问题
- python经常忘的
