FORM表单的常见type属性

FORM表单的tpye属性非常多，这里只介绍常见的几个：

text ： 输入普通文本，例如登录注册下的用户名

password ： 输入密码文本，例如登录注册下的密码，隐藏用户的输入

radio ： 单选框，在属于同一个组的几个选项中，只能选取其中一个，是互斥的关系，例如你的性别

checked ：选中状态，布尔类型的属性，只要加上该type就一定选中，无论该属性的具体值是什么

checkbox ：复选项，即使属于同一组，也仍然能选择多个，不具备互斥关系

button ：显示一个提交按钮，但是点击后不会进行下一步操作，主要配合JS写逻辑

submit ：显示一个提交按钮，点击后会触发下一步动作，触发跳转到下一步网页

reset ：显示一个按钮，点击后会重置表单

---

text属性：普通文本

<input type="text" name="username">

表现为

password属性： 密码文本

<input type="password" name="userpassword">

表现为

radio属性：单选框

此处表现为一个单选按钮，为何是input，是因为用户选择的输入是选择该按钮输入，至于按钮后面的正文，则是静态的文本展现

<input type="radio" name=”gender“ value=”1“>男<br>

<input type="radio" name=”gender“ value=”0“>女<br>

分组按照name分组，name相同为同一组。

特别的，提交的为value属性，gender = 1.若没有value属性则提交为gender= 

checked属性：选中状态

<input type="radio" name=”gender“ value=”1“ checked>男<br>

默认该选项按钮选中

checkbox属性：复选项

<input type="checkbox" name=”hobby“ value=”basketball“>篮球<br>

<input type="checkbox" name=”hobby“ value=”football“>足球<br>

哪怕是在hobby的同一组也可以都选中 

button、submit、reset

按钮分别为

 

---

表单select标签与其multiple属性

其效果类似单选项，只能选择一个

<select name="gender">

        <option value="1">男</option>

        <option value="0">女</option>

</select>

出现的效果为

若其加上multiple属性则可以多选，该属性和checked属性一样，加上就代表可以多选，是布尔类型

<select name="gender"multiple>

        <option value="1">男</option>

        <option value="0">女</option>

</select>

出现的效果为

---

文本输入框

<textarea></textarea>

name属性用于提交，rows="...."表示约束能输入多少行，cols="...."表述约束能输入多少列

<input>为单标签不需要闭合标签，但是<tetxtarea>需要

---

表单总结