day05表单的应用

1.表单的使用

1）表单框的使用

标签名称form

form标签只是一个盒子没有实际含义，在这个标签内书写表单控件收集用户信息
属性：

<form action="php.php" name="个人相亲表">
        <input type="text"  maxlength="11">
</form>

• action 后台地址
• name 表单框的名字
• method 前端和后台的交互的一种方式 get/post两个用处差不多

2）表单控件的使用

表单控件的作用是让用户选择填写个人信息的

①标签名称input

<h2>个人相亲表</h2>
    姓名：<input type="text" value="请输入您的姓名..."><br>
    密码：<input type="password" placeholder="请输入您的银行卡密码..."><br>

②属性

1.type

• type 表示类型，默认是text文本输入框——重点，在工作中如果需要收集用户的信息，可以是用户的性别、年龄等，也可以使用表单控件去操作

2.type属性值类型：

(1). text 文本+value

<form action="php.php">
        <h2>个人相亲表</h2>
        姓名: <input type="text" value="请输入您的姓名..."> <br>
</form>

(2).password 密码:隐藏密码内容+placeholder

<form action="php.php">
        <h2>个人相亲表</h2>
        密码: <input type="password" placeholder="请输入您的银行卡密码..."> <br>
</form>

(3).radio 单选按钮+name

单选按钮有多个时会默认同时可以选择上，需要设置相同的name值即可

<form action="php.php">
        <h2>个人相亲表</h2>
        性别: <input type="radio" name="gender">男<input type="radio" name="gender">女<br>
</form>

(4).checkbox 多选，勾选按钮+checked/disabled

快速生成法（中间不要有空格）： input[type=“checkbox”]*3

<input type="checkbox">淦饭
<input type="checkbox">睡觉
<input type="checkbox">唱跳rap篮球

(5).type标签后可接另一种勾选框属性

• 默认选择 checked，代表此选项勾选被锁定，虽然可以点击取消勾选，但是在刷新或者提交后仍然会被勾选上

<input type="checkbox" checked>喝酒烫头 <br>

• 禁止选择 disabled，代表无法点击勾选上

<input type="checkbox" disabled>敲代码

(6).功能按钮: submit/reset+value以及button+value+onclick

一定要放在form表单中才有用，并且submit和reset在某些时候浏览器显示的按钮文本内容，不一定是提交或者重置，可以在后面用value设置

• submit 提交，提交时页面会跳转
• reset 重置

<input type="submit" value="点击提交当前表单"> 
<input type="reset"> <br>

• button 空按钮 没有实际作业，要绑定js事件才可
  在使用button时有两种书写方式：
  a、 type类型为button，只在当前页面跳出一个弹窗，点击弹窗确定按钮时【【不会】】跳转到其他页面
  <input type="button" value="点击浏览器弹窗" onclick="alert('是兄弟就来砍我1111')">
  b、 不用type标签，直接改为用button标签，只在当前页面跳出一个弹窗，点击弹窗确定按钮时【【会】】跳转到其他页面
  <button onclick="alert('是兄弟就来砍我22')">点击</button>

• 注意：在点提交表单后，在浏览器的地址栏中，网址的最后会多一个问号，意思是提交后，后面接的参数

3.只需了解的属性

• name 表单控件的名字
• size 尺寸，可以表示表单控件的宽度，不建议用，属性值是字符数
• maxlength 最大字符长度：例如用户登录注册时写的电话号码，设置为“11”，则只能输入11位

<form action="php.php" name="个人相亲表">
        <input type="text"  maxlength="11">
</form>

4.value

• 在type类型为text的时候，value是提示用户输入信息的文本，占位置，用户填写信息的时候需要手动删除。意思是value中的内容会自动填写在表单中
• 为password时，value不能使用，可以使用html5中新增的属性placeholder，就不用再手动删除placeholder内的属性值“请输入您的银行卡密码…”，属性值内的字体显示为灰色

姓名: <input type="text" value="请输入您的姓名..."> <br>
密码: <input type="password" placeholder="请输入您的银行卡密码..."> <br>

2.作业-案例

• 题目：
  

• 代码