2021-09-08

表单

type	指定元素类型,默认为text,其他:password,checkbox,radio,submit,reset,file,hidden,image,button
name	指定表单元素名称
value	元素的初始值
size	指定表单元素的初始宽度,当type为text或password时,表单元素大小以字符为单位.对于其他类型,宽度以像素为单位
maxlenght	type为text或password,输入最大字符数
checked	type为radio或checked时,指定按钮是否是被选中

post提交和get提交

表单form

• action:表单提交的位置,可以是网站,也可以是一个请求处理的地址,提交完后到达的位置
• method:提交方式 post,get
  get方式:我们可以在url中看到提交的信息,不安全,高效
  post方式:比较安全,可以传输大文件

<form action="链接标签.html" method="get">

文本框和单选框

**密码框:**input type=“password”

文本输入框: input type=“text”
value:初始值
maxlenght:文本最大长度
size: 文本框的长度
readonly 只读标签
hidden 隐藏域
placeholder 提示信息
required 不能为空判断

单选框
input type=“radio”
value:单选框的值
name:表示组
checked 默认选中
disabled 禁用

<p>性别
  <!--    name是一样的,是一个组才可以形成单选-->
  <input type="radio" name="sex" value="boy" checked/>男
  <input type="radio" name="sex" value="girl" disabled/>女
</p>

按钮和多选框

多选框
name一样的表示都是一个hobby组的
checked 默认选中

<p>爱好:
  <input type="checkbox" value="sleep" name="hobby">睡觉
  <input type="checkbox" value="code" name="hobby">敲代码
  <input type="checkbox" value="chat" name="hobby">聊天
  <input type="checkbox" value="game" name="hobby">游戏
</p>

按钮
input type=“button”
input type=“image”

<input type="image" src="图片地址">

​ input type=“submit”
​ input type=“reset”

列表框,文本域和文件域

下拉框
默认选中 selected

<p>国家
  <select name="类型">
    <option value="选项">中国</option>
    <option value="选项" selected>瑞士</option>
    <option value="选项">美国</option>
    <option value="选项">印度</option>

  </select>
</p>

文本域

<p>反馈
  <textarea name="textarea" cols="30" rows="10">酷啊</textarea>
</p>

文件域

 <p>
    <input type="file" name="files">
    <input type="button" name="上传">
  </p>
  

搜索滑块和简单验证

邮件验证

<p>邮件:
  <input type="email" name="email">
</p>

URL验证

<p>URL:
  <input type="url" name="url">
</p>

数字验证

• step:表示每次自增多少
• max最大数字
• min最小数字

<p>数字验证:
  <input type="number" name="number" max="23" min="1" step="2">
</p>

滑块 type="range"

<p>音量:
  <input type="range" min="0" max="">
</p>

搜索框

<p>
  <input type="search" name="search">
</p>

增强鼠标可用性

点击名字时,就可以使文本框有反应并且输入

<p>
  <label for="mark"> 点我</label>
  <input type="text" id="mark">
</p>

表单初级验证

常用方式:

• placeholder 提示信息
• required 非空判断
• patten 正则表达式

<p>自定义邮箱
  <input type="text" name="diymail"pattern="" >
</p>