HTML(表单)（微重点）

表单

文本类型

    账号：<input type="text" maxlength="15" name="账号" placeholder="请输入账号">       //特别注意 placeholder
    密码：<input type="password" maxlength="15" name="pwd" placeholder="请输入密码：">   
     //另外也可以设置value =“默认值”；  相比较上面的placeholder  ,placeholder更好用

placeholder与value的联系与区别：

联系：

value属性放在表单input中，表示一种默认值，常用于type类型为text的文本控件中。
placeholder也表示一种默认值，与value差不多。

区别：

value在设置值以后，value=“兔兔”，在网页上显示时为黑色，鼠标点击文本框末位输入123时，此时文本框显示的不是123，而是“兔兔123”。那么怎么显示想要的123呢，此时就要用到placeholder属性，placeholder=“兔兔”； 此时鼠标点击以后显示的就是123；兔兔就此消失；不会显示到文本中。

---

#### 单选按钮

性别：：
 	男<input type="radio" name="" id="">
  	女<input type="radio" name="" id="">
 	人妖：<input type="radio" name="" id="">

重点：

单选按钮具有互斥性，也就是只能选一个，因此要把name属性设置为一样，名字怎么取随意。 例如如果是性别就设置为：name=“sex”;

如果没有设置：（那么你的性别就会变成如下情况：）
很显然你不可能又是男的又是人妖。

单选按钮的正确演示：

把name=“sex”；

性别： 男<input type="radio" name="sex" id=""> 女<input type="radio" name="sex" id=""> 
人妖：<input type="radio" name="sex" id="">

效果图：

总结：name属性一定要设置为一致；

---

复选框按钮

语法:

	<input type="checkbox" name="" id="">   // name也设置为一致，这样就可以实现多选的效果，此时名字一致不会造成互斥。
    <input type="checkbox" name="" id="">
    <input type="checkbox" name="" id="">

使用场景： 在填写个人信息的时候，在兴趣爱好一栏中常用到，例如：爱好：唱歌 弹琴 疼媳妇等
如图+代码：

爱好：	唱歌:<input type="checkbox" name="" id=""> 
		弹琴：<input type="checkbox" name="" id="">
		疼老婆：<input type="checkbox" name="" id="">

---

下拉菜单控件：

 <select name="" id="">
            国家：
            <option value="中国">中国</option>
            <option value="中国">中国</option>
            <option value="中国">中国</option>
            <option value="中国">中国</option>
            <option value="中国">中国</option>
            <option value="中国">中国</option>
</select>
        重点：value要与option中间的值一致；

---

域

常用于：评论，意见箱等
语法：评论： <textarea name="" id="" cols="30" rows="10"></textarea>表示这是一个10行30列的评论区，当然也可以自己调节大小；

---

文件域

常用于上传文件：
代码：<input type="file" name="" id="">

---

其他表单控件：

	 <form action="">
        <input type="button" value="">    // 普通按钮   尝尝与javascript连用 ，设置他的功能
        <input type="color" name="" id="">   // 颜色控件   可以设置你喜欢的颜色
        <input type="date" name="" id="">   //  日期控件   设置出生年月日等等
        <input type="email" name="" id=""> //  电子邮箱    特点该文本框中只能输入邮箱格式，其它格式输入会报错
        <input type="tel" name="" id="">  // 电话控件    该文本框中仅仅能输入电话   输入其它格式报错
        <input type="search" name="" id="">  //  搜索框   这个与后端连用    把输入的东西传输到相应的位置
    </form>

前端技术小白 零基础九个月第二天