前端笔记二

第二代网页标签（表单标签）

一、输入标签

<input type="属性“>	type控制input标签的属性，

以下都是type控制的属性：

1. 文本框——text

• text属性用来设定在表单的文本框中，输入任何的文本、数字和字母
  <input type=“text” name=“控件名字” size=”控件的长度/文本框的长度“ maxlength=”最长字符数“ value=”文本框的默认取值“ placeholder=”占位符/添加提示文字，填写内容时消失“>

name=”名字“	控件名字
size=”数字“	控件的长度/文本框的长度（单位不是像素 px）
maxlength=”数字“	最长字符数/输入框最多输入的字数
value=”内容字“	文本框里面的初始字
placeholder=”内容文字“	添加提示文字，填写内容时消失
readonly=”readony“	把文本框设置成只可读，而不能输入操作
disabled=”disabled“	禁用文本框、密码框、按钮等，当用它时，所对应的将变成灰色，不能对其进行操作，如下图所示：

2. 密码域——password
3. 单选按钮——radio

• 当两个单选按钮的name是一样的时候，就会形成互斥，此时就只能单选。具体如图所示：
• 当两个单选按钮的name是不一样时，就不会形成互斥，此时，就可以两个按钮都可以选择。具体如下图所示：
• 若要使radio的按钮默认地选择其中一个，就需要在里面添加一个checked，如图所示：

4. label和span的区别

• label会让鼠标在点击文字时，使输入框有晕光的效果，而span没有（要注意的是，label里的for要与input里的id相同的命名）如图所示：

5. 复选框checkbox

• 代码：<input type="checkbox" name="" value="">可以用checked来默认其中一个选项，可以用disabled来禁用其中的选择框。

二、下拉标签select

• 代码如下：

<div>
<span>市区</span>
<select name=“shiqu” >
<option valu=“  fz”>福州</option>
<option valu=“  xm”  selected >厦门</option>
<option valu=“  qz”>泉州</option>
</select>
</div

效果如下：

• 注意：要使下拉框默认值，需用selected。