form表单及其连用标签总结

form表单简单介绍

form一般与input连用，包含input标签，textarea标签，select标签。
跳转的文件在同一个文件夹中，才能实现直接编写**（demo01.html)**整个文件，否则需要表明路径;

绝对路径：从盘符开始查找，直到找到文件为止，路径＋文件名
例如：C:\Users\wx\Desktop\demo.html
相对路径：当前文件和目标文件的相对路径，例如：…\demo.html
"…“表示从上一级开始查找，直到找到文件为止。
注意：文件名前应加”",容易出错成"/"

form表单语法结构

<form action=" “name=” “method=”">
action------跳转的路径
name------表单的名字
methed------跳转的方式

两种跳转网页的请求方式：post请求，get请求（默认为get请求）

get请求（输入name时显示密码，不安全）：

file:///D:/A%E4%BA%91%E8%AE%A1%E7%AE%97/demo01.html?username=zxc&password=4561230

post请求(相对较安全)：

file:///D:/A%E4%BA%91%E8%AE%A1%E7%AE%97/demo04.html

例如：

<html lang="en"><head><meta charset="UTF-8"> <title>form表单标签</title></head><body><form action="..\demo02.html" > 用户名：<input type="text" name="username">密码：<input type="password" name="password"> <input type="submit"></form> </body></html>

input标签

tepe属性的取值

text	文本框
possword	密码框
rest	复位按钮（重置按钮）
submit	提交按钮
button	按钮（普通按钮）
radio	单选按钮
checked	多选按钮
image	图像按钮（src属性，一般吧采用）
file	上传文件（文件域，相较于image常用
eamil	邮箱
color	颜色
date	日期
time	时间
datetime-local	日期＋时间
range	进度条
url	文本字段（一般用text代替）
hidden	隐藏域作用：提交一些用户不可见的信息

属性（可直接在input输入）：

readonly	字段只能读不能修改
disabled	规定input标签禁用，不可点击（灰色框）
required	提示input标签不能为空白提交
autofocus	默认光标位置
checked	默认选择
seleted	默认选择某一项

***小总结：***与默认有关属性
及：autofocus------默认光标位置
checked------ 默认选择
seleted------默认选择某一项

value小扩展：
value 属性为 input 元素设定值。
对于不同的输入类型，value 属性的用法也不同：
type=“button”, “reset”, “submit” ------定义按钮上的显示的文本
type=“text”, “password”, “hidden” ------- 定义输入字段的初始值
type=“checkbox”, “radio”, “image” ------定义与输入相关联的值
注释：input type=“checkbox” 和 input type=“radio” 中必须设置 value 属性。

注释：value 属性无法与 input type=“file” 一同使用。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"> <title>input标签</title>
</head>
<body>
<h2>用户注册</h2>
<form><p>用户名:<input type="text" value="zhangsan" name="username" readonly disabled></p><p>密码:<input type="password" autofocus></p> <p>确认密码:<input type="password" required></p> <p> 请选择你的性别:<input type="radio" name="gender" checked>男 <input type="radio" name="gender">女 </p> <p> 请选择你的爱好:<input type="checkbox">唱歌 <input type="checkbox">跳舞 <input type="checkbox">rap<input type="checkbox">篮球</p> <input type="submit" value="上传"><input type="reset" value="复位"> <input type="button" value="按钮"><input type="image" src="按钮.jpg"><input type="file"> <input type="hidden" > 请输入你的邮箱:<input type="email" > </form>
</body>
</html>```html

select标签

select------下拉列表框

属性	解释
option	子选项（下拉列表框的选项）
multiple	以列表的形式显示

不加multiple：

请选择你所在的城市：<select><option>西安</option> <option>重庆</option> <option>内江</option> <option>江苏</option> <option>北京</option> <option>上海</option> </select>

加multiple 且默认选择重庆：

请选择你所在的城市：<select multiple="multiple"> <option>西安</option> <option selected="selected">重庆</option> <option>内江</option> <option>江苏</option> <option>北京</option> <option>上海</option> </select>

小总结：标题标签与font标签的差异
标题标签：hn n取值1~6 字体大小由大到小，字体加粗，自动换行。
font标签：size属性取值1~7 字体大小由小到大，字体逐渐加粗，不会自动换行。

textarea标签

clos	文本域的宽度
rows	文本域的高度

  <p> <textarea cols="50" rows="5">这个家伙很懒，什么都没有留下......
</textarea> </p>