9 integrated example
of imitation Baidu cloud disk download page combat

Table 10

10.1 table

table to table tab allows our table is displayed in the browser the following table there are two commonly used tags tr and td tr td represents a row indicates that a cell in a row inside, usually in the background management system data table display

<table border="1" cellspacing="0" cellpadding="0">
            <tr>
                <td>学号</td>
                <td>姓名</td>
                <td>班级</td>
                <td>成绩</td>
                <td>等级</td>
            </tr>
            <tr>
                <td>20080795113</td>
                <td>李菲</td>
                <td>3</td>
                <td>12</td>
                <td>不及格</td>
            </tr>
            <tr>
                <td>20080795114</td>
                <td>张菲</td>
                <td>3</td>
                <td>82</td>
                <td>良好</td>
            </tr>
            <tr>
                <td>20080795115</td>
                <td>赵菲</td>
                <td>3</td>
                <td>32</td>
                <td>不及格</td>
            </tr>
</table>

Note: In the table behind the start tag a border cellspacing cellpadding, this form is called to add an attribute html tag, border represents the border, cellspacing represents a gap between the cells, cellpadding represents the distance between the cell contents and border

10.2 Merge Cells

colspan set the current number of cells in the merged cell is the horizontal direction

<table border="1px" width="300" cellspacing="0" cellpadding="0">
      <tr>
          <td>姓名</td>
          <td>张三</td>
          <td>年龄</td>
          <td>20</td>
      </tr>
      <tr>
           <td >个人简介</td>
           <td colspan="3"></td>
      </tr>
      <tr>
           <td >专业技能</td>
           <td colspan="3"></td>
      </tr>
</table>

rowspan set the number of merging cells in the vertical direction of the current cell.

<table border="1" cellpadding="0" cellspacing="0">
            <tr>
                <td>姓名</td>
                <td>张三</td>
                <td>年龄</td>
                <td>12</td>
                <td rowspan="3">
                    <img src="tablehead.jpg"/>
                </td>
            </tr>
            <tr>
                <td>籍贯</td>
                <td>中国</td>
                <td>民族</td>
                <td>汉族</td>
            </tr>
            <tr>
                <td>出生日期</td>
                <td>1999.3.4</td>
                <td>政治面貌</td>
                <td>党员</td>
            </tr>
</table>

Exercise:

1. Table 2. resume curriculum

11 Form

11.1 form tag

form label indicates the form, role is to gather information about the user and sent to the background, for example: login, registration is completed by formate form

form Form Properties

action: to set the address form submission forms to collect data that is to be sent go method: A method for setting form submission form that is the manner in which to send the data to the action set a good address get: one way to send the form data features: form data will be sent is displayed in the browser address bar post: features one way to send data form: form data sent by users are not usually seen

<form action="http://www.baidu.com/s" method="get">
            用户名: <input type="text"   name="user"/>
            密码： <input type="password"  name="password"/>
            <input type="submit" value="提交" />
</form>

11.2 input tag

input tags for the form of a child of the functions will vary according to the type attribute of several commonly used type of property:

type = "text"
type = "password"
type = "checkbox"
type = "radio"
type = "button"
type = "submit"
type="file"
type = "hidden"

Input box

        <input type=“text” /> <!--type="text" 通常用来输入文本内容-->

Password box

<!--type="password" 通常用来输入密码，输入内容不可见-->
<input type=“password” />

Check box

Single box

<!--type="radio"  表示单选，几个input中只能选择一个，是否选中用checked属性-->
<input type=“radio” />

Hidden Field

 <!--type="hidden" 隐藏表单元素，有些时候后台需要某个数据，但是在前端
不需要显示的时候这个数据的时候使用-->
<input type=“hidden” />

File Picker

<input type=“file” /> <!--type="file" 文件上传-->

Submit button

<input type=“submit” /> <!--type="submit" 执行提交动作将数据发送到后台处理-->

Push button

<input type=“button” /> <!--type="button" 普通按钮 不触发提交动作-->

Other attribute property name, the name of a predetermined input element, the background data will be received based on the value of this attribute
value attribute value readonly attribute item table, the specified control is read-only, effective against the input box, push button disabled attribute meaningless, control is unavailable, gray, and does not send the data when the form is submitted Note: If no element name attribute, when the form is submitted, the data will not be sent out

11.3.textarea element

Indicates the number of display columns textarea rows multiline text box attributes, the number of display lines provided in the multi-line text boxes (height), depending on the specific dimensions of the character size attribute cols provided a multiline text box (width), i.e. the number of characters, specific dimensions depending on the size of the text

11.4.button element

The definition of a button.

    <button type="button">Click Me!</button>

11.5.select element

The provisions of the drop-down list box

    <select name="city">
        <option value="bj">北京</option>
        <option>上海</option>
        <option>广州</option>
        <option>深圳</option>
    </select>

name attribute specified size attribute name drop-down box, multiple attribute specified number of visible inside the drop-down box option, after setup menu item allows multiple choice, or only a select

11.6.option element

Definition and Usage

Drop-down box of each specific property value, the value of the drop-down box Note: If you did not write the property value, the default when submitted, the value of the contents of drop-down box is the selected option elements inside, such as Shanghai, Guangzhou, when writing after the value attribute when the form is submitted, the drop-down box to send the value of value is inside the value, for example, if the first option element is selected, the value is submitted rather than Beijing bj

11.7.label element