< 笔记 > HTML

来源：互联网发布：空心车轴数据编辑：程序博客网时间：2024/06/10 06:22

02 HTML 表单标签

By Kevin Song

02-01 < input>标签
02-02 < select>标签
02-03 表单格式化

< form>
< /form>
表单是最常用的标签，用于与服务器端的交互

常用属性

action
method

02-01 < input>标签

< input type=”属性值” />：输入标签，接受用户输入信息
type属性的10个值

text：文本框
password：密码框
radio：单选框
- name：组名，同一组的只能选一个
- checked：默认选定
checkbox：复选框
reset：重置
- value：自定义按钮名称
submit：提交
- value：自定义按钮名称
file：选择文件
image：图片超链接
hidden：隐藏组件，数据不需要客户端知道，但是可以将其提交到服务器端
button：按钮
- onclick：点击触发

如果要给服务器提交数据：表单中的组件必须有name和value属性

<html>    <head>        <title>Kevin's Homepage</title>    </head>    <body>        <form>            1. 输入姓名：<input type="text" name="user" value="" /><br/>            2. 输入密码：<input type="password" name="pwd"/><br/>            3. 选择性别：<input type="radio" name="gender" value="man"/>男<br/>                     <input type="radio" name="gender" value="woman" checked="checked"/>女<br/>            4. 选择技术：<input type="checkbox" name="tech" value="Java"/>Java<br/>                     <input type="checkbox" name="tech" value="C++"/>C++<br/>                     <input type="checkbox" name="tech" value="Python"/>Python<br/>            5. 选择文件：<input type="file" name="file" value="" /><br/>            6. 图片按钮：<input type="image" src="11.jpg"><br/>            7. 隐藏组件：<input type="hidden" src="11.jpg"><br/>            8. 一个按钮：<input type="button" value="按钮" onclick="alert('爱你欧')"><br/>                     <input type="reset" value="重置表单">                     <input type="submit" value="提交表单">        </form>    </body></html>

02-02 < select>标签

下拉菜单

<select>    <option value="none">--选择国家--</option>    <option value="USA">美国</option>    <option value="CN" selected="selected">中国</option>    <option value="KR">韩国</option></select>

文本框

<textarea name="text"></textarea>

02-03 表单格式化

<html>    <head>        <title>Kevin's Homepage</title>    </head>    <body>        <form action="http://www.baidu.com" method="get">            <table border="1" bordercolor="#00ffff">                <tr>                    <thcolspan="2">注册表单</th>                </tr>                <tr>                    <td>用户名称</td>                    <td><input type="text" name="user" value="" /></td>                </tr>                <tr>                    <td>输入密码</td>                    <td><input type="password" name="pwd"/></td>                </tr>                <tr>                    <td>确认密码</td>                    <td><input type="password" name="repwd"/></td>                </tr>                <tr>                    <td>选择性别</td>                    <td>                    <input type="radio" name="gender" value="man" />男                    <input type="radio" name="gender" value="woman" />女                    </td>                </tr>                <tr>                    <td>选择技术</td>                    <td>                    <input type="checkbox" name="tech" value="Java"/>Java                    <input type="checkbox" name="tech" value="C++"/>C++                    <input type="checkbox" name="tech" value="Python"/>Python                    </td>                </tr>                <tr>                    <td>选择国家</td>                    <td>                        <select name="country">                            <option value="none">--选择国家--</option>                            <option value="USA">美国</option>                            <option value="CN" selected="selected">中国</option>                            <option value="KR">韩国</option>                        </select>                    </td>                </tr>                <tr>                    <th colspan="2">                    <input type="reset" value="重置表单">                    <input type="submit" value="提交表单">                    </th>                </tr>            </table>        </form>    </body></html>

阅读全文

0 0