【学习笔记】HTML表单

【学习笔记】HTML表单

表单在登录和注册时常见，我们通过提交表单来完成登录和注册等操作。

表单的标签<form>

• 属性

  • method：常用的有get/post ，【必填】

  • action：向何处发送表单数据 【必填】

• 表单中的元素

  • 输入框 <input type="text">

  • 密码框 <input type="password">

  • 提交 <input type="submit">

  • 重置 <input type="reset">

<form action="6.表格.html" method="get">
    <p>账号：<input type="text" name="username"></p>
    <p>密码：<input type="password" name="pwd"></p>
​
    <input type="submit">
    <input type="reset">
​
</form>

 

method中，get和post的区别：

主要体现在提交表单后的url上

get：http://localhost:63342/html/html/6.表格.html?username=123&pwd=123

post：http://localhost:63342/html/html/6.表格.html

get请求把提交的内容都在url中显示出来了，不安全，但高效

post则没有显示提交的内容，比较安全，可以传输大文件

 

文本框

文本框的其他属性：

• value：默认初始值

• maxlength：最长能写几个字符

• size：文本框的长度

<p>账号：<input type="text" name="username" value="默认值" maxlength="6" size="20"></p>

 

单选框

<p>性别：
    <input type="radio" value="boy" name="sex"/>男
    <input type="radio" value="girl" name="sex"/>女
</p>

单选框的标签是<input>，type是radio，

value是单选框的值，也是提交的表单的值

name是组，想要实现单选必须在一个组里，即name必须相同，否则实现不了单选

默认选中：checked

多选框

多选框与单选框相同，但它的type是checkbox

它也需要value，是需要提交的表单的内容，name表示这些多选框是在一个组里

这些多选框的value提交后是以数组的形式展现

默认选中：checked

<p>爱好：
    <input type="checkbox" value="eat" name="hobby"/>吃饭
    <input type="checkbox" value="sleep" name="hobby"/>睡觉
    <input type="checkbox" value="code" name="hobby"/>写代码
    <input type="checkbox" value="play" name="hobby"/>玩
</p>

 

按钮

• 普通按钮 <input type="button"> value属性是按钮框中的值

• 图像按钮 <input type="image"> 点击图像按钮后，是提交表单

• 提交按钮 <input type="submit">

• 重置按钮 <input type="reset">

 

下拉框

标签<select> 属性name是列表的名称

标签的子选项是<option> 属性value是每个选项的值

默认选项是selected

<p>城市：
    <select name="列表名称">
        <option value="beijing">北京</option>
        <option value="shanghai" selected>上海</option>
        <option value="guangzhou">广州</option>
        <option value="shenzhen">深圳</option>
    </select>
</p>

 

文本域

标签 <textarea name="textarea" cols="10" row="10">

cols:行，row：列

 

文件域

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

 

简单验证

• 邮箱验证

  <p>邮箱：
      <input type="email" name="email">
  </p>

  

 

• URL验证

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

  

 

• 数字验证

  <p>数字：
      <input type="number" name="num" min="0" max="100" step="1">
  </p>

  

 

 

滑块

<p>滑块：
    <input type="range">
</p>

搜索框

<p>搜索：
    <input type="search">
</p>