2. html -table 列表 表单控件

2017-12-23  本文已影响0人  银角大王__

1. 列表 

1.1无序列表:       

1.2 有序列表: 

1.3 自定义列表 : 

2. 表格 table 

2.1 合并表格 

☞ 横向合并 colspan=”2”

☞ 纵向合并   rowspan=”2”

合并效果如下:  

table案例  (细线表格)


3. 表单控件

<form  action="1.php" methood="get">      

  action: 设置处理表单数据的后台程序

  method: get | post设置提交表单数据的方式

 maxlength  设置控件中最多能输入多少字符

name:  设置控件名称

placeholder:  设置默认值

value:  设置默认值

readonly:  设置控件为只读控件(只能看不能编辑)

disabled:  设置控件不能编辑

selected  : option中 设置默认选中 

<fieldset> 

     <legend> 人员信息表  </legend>

用户名: <input   type = "text"  maxlength="6"  name="username" placeholder="请输入用户名">

密码:  <input  type = " password "  value= ""请输入密码">

选择:  性别  <input type="radio"  name="gender" value="man"> 男生

                   <input  type="radio"  name="gender" value="woman"> 女生

下拉选择: 

           <select>

                    <option value="bj" selected>北京</option>

                   <option value="hb" >河北</option>

                    <option value="tj">天津</option>

                     <option>上海</option>

            </select>

          <select>

                 <optgroup label="北京">

                   <option>朝阳</option>

                  <option>东城</option>

<                  .option>西城</option>

                 </optgroup>

           </select>

多选: <input type="chexkbox" checked>读书

        <input type="chexkbox"  checked> 购物

       <input type="写字"> 

文件上传:     <input type="file">

多行文本输入框:    <input    cols:设置文本域宽度    rows:设置文本域高度    type="textarea"></textarea>

隐藏控件:    <input type="hidden" value="1" name="id">

提交按钮:   <input type="submit" >

按钮:     <input type="button"  value="按钮">

重置按钮:      <input type="reset">

图片提交按钮:     <input type="image" src="1.jpg" >

</fieldset>

</form>

上一篇下一篇

猜你喜欢

热点阅读