表单

form标签

所有表单标签包含在form内

1
2
3


<form>
        
    </form>

input标签

type属性

决定input属性类型

点击展开：input 标签 type 类型说明

`type` 类型	描述/功能	示例 HTML
`text`	单行文本输入框	`<input type="text">`
`password`	密码输入框，输入内容隐藏	`<input type="password">`
`email`	邮箱地址输入框，自动校验格式	`<input type="email">`
`number`	数字输入框，带上下箭头控制	`<input type="number">`
`checkbox`	复选框，可以多选	`<input type="checkbox">`
`radio`	单选框，同组只能选一个	`<input type="radio">`
`date`	日期选择器	`<input type="date">`
`file`	文件上传按钮	`<input type="file">`
`submit`	提交按钮	`<input type="submit">`

1
2
3


<form>
    <input type="text">
</form>

placeholder属性

1
2
3


<form>
    <input type="text" placeholder="请输入文本">
</form>

vaule属性

1
2
3


<form>
    <input type="text" value="请输入文本">
</form>

span|label框选

1
2
3
4
5
6
7
8
9


<form>
    <span>用户名:
        <input type="text" value="请输入用户名">
    </span>
    <br>
    <span>密码:
        <input type="password" value="请输入密码">
    </span>
</form>

想要整洁可以放置在表格中

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


<form>
    <table border="0">
        <tr>
            <td><label>用户名：</label></td>
            <td><input type="text" placeholder="请输入用户名"></td>
        </tr>
        <tr>
            <td><label>密码：</label></td>
            <td><input type="password" placeholder="请输入密码"></td>
        </tr>
    </table>
</form>

单选radio

name属性

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


<form>
    <table>
        <tr>
            <td><label>性别:</label></td>
            <td><input type="radio" name="gendar">男</td>
            <td><input type="radio" name="gendar">女</td>
            <td><input type="radio" name="gendar">其他</td>
            </tr>
    </table>
</form>

for属性

label for属性一般与input id属性对应
用户点击label时，光标能自动聚焦到文本框
alt text

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


<form>
    <table border="0">
        <tr>
            <td><label for="username">用户名：</label></td>
            <td><input type="text" id="username" placeholder="请输入用户名"></td>
        </tr>
        <tr>
            <td><label for="password">密码：</label></td>
            <td><input type="password" id="password" placeholder="请输入密码"></td>
        </tr>
    </table>
</form>

多选 checkbox

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


<form>
    <table border="0">
        <tr>
            <td><label for="hobby">爱好:</label></td>
            <td><input type="checkbox" name="hobby">篮球</td>
            <td><input type="checkbox" name="hobby">足球</td>
            <td><input type="checkbox" name="hobby">乒乓球</td>
        </tr>
    </table>
</form>

action属性&提交按键 submit

action 提交后发送到向后端的服务器URL地址
可用action="#"表示不跳转

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34


<form action="#" border="0">
    <table>
        <tr>
            <td><label for="username">用户名：</label></td>
            <td><input type="text" id="username" placeholder="请输入用户名"></td>
        </tr>
        <tr>
            <td><label for="password">密码：</label></td>
            <td><input type="password" id="password" placeholder="请输入密码"></td>
        </tr>
    </table>
    <table border="0">
        <tr>
            <td><label>性别:</label></td>
            <td><input type="radio" name="gendar">男</td>
            <td><input type="radio" name="gendar">女</td>
            <td><input type="radio" name="gendar">其他</td>
            </tr>
    </table>
    <table border="0">
        <tr>
            <td><label for="hobby">爱好:</label></td>
            <td><input type="checkbox" name="hobby">篮球</td>
            <td><input type="checkbox" name="hobby">足球</td>
            <td><input type="checkbox" name="hobby">乒乓球</td>
        </tr>
    </table>
    <table>
        <tr>
        <td><label for="submit">提交:</label></td>
        <td><input type="submit" value="提交"></td>
        </tr>
    </table>
</form>

实际应为这样 markdwon和html表现略有不同
本网页采用markdown html共同编写会有显示区别

alt text

用户名：
密码：

用户名：
密码：

用户名：
密码：