html部分标签的使用清单
首先,要想成为一名优秀的前端工程师,对于web中的各种标签在其命名时,同时给出id和name属性的值是应该的.
下面是各种html初学者的标签使用清单:
在web当中同时使用id,name的属性是一个好的习惯.
<form action="" id="" name="" method="get|post">
各个表单元素都写在应在的表单内
</form>
action属性的值是一个URL,可以是相对地址或绝对地址.
创建from表单时,同时定义其id,name.
method是表示发送数据的方法:get是把数据附加在URL后.相比起来,post比较安全,不会把数据显示在URL中.
-------------------------------各个表单元素的设置---------------------------------------------------
1. 文本框 <input type="text" id="username" name="username" size="30" maxlength="10"/>
其中id,name的属性必须写,这是一个好的习惯;size是设置文本框的长度,maxlength是设置文本框最多能输入10个字符.
input不闭合(就是没有</input>).
2. 口令输入框 <input type="password" id="password1" name="password1" size="30" maxlength="10"/>
同文本框的属性一样,只是其作用是将输入的内容显示为星号或其他字符,比如我们经常登录的各种密码的形式.
input不闭合(就是没有</input>).
3. 复选框 <input type="checkbox" name="city" id="sh" value="上海"/>上海</input>
<input type="checkbox" name="city" id="cd" value="成都"/>成都</input>
<input type="checkbox" name="city" id="sz" value="深圳"/>深圳</input>
单选框 <input type="radio" name="gender" id="male" value="male"/>男</input>
<input type="radio" name="gender" id="female" value="female"/>女</input>
注意了,单选框的name值必须相同,复选框的name值必须相同(各人理解:这个name表示了这些选择项是属于什么类别的).
id,name的值尽量一样,但也可不一样;value的值必须给出,因为选择的只是一个选项,而不是一个文本.
这里的input有闭合,就是有</input>.
4. 隐藏字段 <input type="hidden" id="e-mail" name="e-mail" value="me@mysite.com"/> (作用还不太懂)
其中必须要有名称id值和value值(name值是自己加上去的,书上没有name值,不懂).
5. 文件上传控件
<form action="" id="myform" name="myform" method="post" enctype="form/multipart">
<input type="file" id="document"/>
</form>
注意:id,name属性照写后,还有文件上传控件这个表单元素需要这个form表单的
method属性必须为post,enctype(编码类型)必须为form/multipart.input标签
里,type的值为file,这里不需要name,只需要一个id名称,因为文件本身就是表单字段.
6.下拉列表框(不需要input)
<select name="food" id="food" multiple="multiple" size="3">
<option value="sic">川菜</option>
<option value="shh">上海菜</option>
<option value="beij" selected="selected">北方菜</option>
<option value="guangd">粤菜</option>
</select>
注意:它由select和option组成,(给列表命名)name属性必须命名,(标识这个列表)id属性也必须命名;
(设置一次选择多个)multiple="multiple",(设置显示的选项个数)size="10",这两个属性就是可以自定义;
option元素的value属性是给每个选项赋一个唯一的值;seleed="selected"是设置该选项为默认值.
7.多行文本框(不需要input)
<textarea name="comment" id="comment" cols="30" rows="10"></textarea>
以上是多行文本框最基本的四个属性(须定义);cols代表宽度,rows代表高度.
8. 提交按钮\重置按钮\命令按钮(普通按钮)
<input type="submit" value="发送"/>
<input type="reset" value="取消"/>
按钮不需要名称和值,只需要给它type属性的值(submit|reset),以及在浏览器中所显示的标题(value="标题").
用图片作为提交和重置按钮:
<input type="image" src="logo_03.png" value="submit" alt="发送"/>
<input type="image" src="image_1.jpg" value="reset" alt="取消"/>
设置type属性值为image,src为图片的路径(绝对或相对),设置value为submit|reset(提交或取消),
alt是当图片在浏览器中无法显示时,提供的一个可选的文本.
普通按钮(不能提交表单或重置表单)
<input type="button" value="增加"/>
<input type="button" value="删除"/>
设置type属性为button,value="标题"是设置按钮在浏览器上显示的标题
9. 表单元素lable
<lable for="comment">用户名:</lable>
<input type="text" id="comment" name="comment" value="" disabled="disabled" size="15"/>
lable是给表单里的控件元素定义文本标签的,其中for属性的值必须跟input里的id属性值相同,其意义就是取id为comment
的文本输入控件来为其定义文本标签为"用户名";
id,name,size(控件大小)是基本的三个属性(须设定),value是设定默认值(双引号里写代表默认值,不写,代表没有默认值为空),
disabled(readonly)是设置内容不可改.
10. fieldset和legend元素
<fieldset>
<legend>性别</legend>
<input type="radio" name="gender" id="male"/>男</input>
<input type="radio" name="gender" id="female" checked="checked"/>女</input>
</fieldset>
注意:fieldset是给被包含在内的表单元素的周围添加一个细边框;
legend是给filedset元素添加标题(在细边框的左上部添加标题).
