HTML Form

作者: roy_pub | 来源:发表于2018-11-25 10:44 被阅读6次

02_html&css
_姜3
2018-02-02 疑问
2019-10-24 表单标签
HTML表单的用法
HTML表单用法
HTML Form
html form
html form
异步执行图片上传

label 标签

label 为 input 元素定义标注，用于绑定一个标点元素，当点击标签的时候，被绑定的标签就回获得输入焦点。
如下代码所示，点击 UserName不能获取焦点，点击Password可以获取焦点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Table</title>
</head>
<body>
    UserName:<input type="text"> <br />
    <label>Password:<input type="password"></label>
</body>
</html>

textarea

文本域

    <textarea cols="50" rows="10" placeholder="留言板">
    </textarea>

select

下拉选择菜单

  <select>
        <option>BMW</option>
        <option selected>Volvo</option>
        <option>Geely</option>
    </select>

input

属性	属性值	描述
type	text	单行文本输入框
	password	密码输入框
	radio	单选按钮
	checkbox	复选框
	button	普通按钮
	submit	提交按钮
	reset	重置按钮
	image	图像形式的提交按钮
	file	文件域
name	用户自定义	控件的名称
value	用户自定义	input 控件默认文本值
size	正整数	input 控件在页面中的显示宽度

radio 类型，需要设置相同的name

form

from标签被用于定义表单域

    <form action="url" method="get" name="form name">
        <!-- 表单控件 -->
    </form>

action用来指定接手并处理表单数据的服务器程序的URL地址
method 设置提交方式，get 或 post
name 表单名称，区分同一页面的多个表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Table</title>
</head>
<body>
    <form action="regist.php" method="get" name="form name">
        <!-- 表单控件 -->
        用户名 <input type="text" value="" name="username"/> <br /><br />
        密  码 <input type="password" value="" maxlength="6" name="pwd"/> <br /><br />
        男<input type="radio" name="gender" checked="checked">
        女<input type="radio" name="gender"> <br /> <br />
        玄幻<input type="checkbox" name="love">
        言情<input type="checkbox" name="love">
        暴力<input type="checkbox" name="love"> <br /><br />
        <input type="file" /> <br /><br />
        <input type="image" src="timg.jpeg" width="120" height="45" /> <br /><br />
        <input type="button" value="注册" />
        <input type="submit" value="提交" />
        <input type="reset" value="重置" />
    </form>
</body>
</html>