html总结之表单

表单

表单用于向服务器传输数据，从而实现用户与Web服务器的交互

表单标签

标签	描述
form	供用户输入的表单
input	输入
textarea	文本域
label	标签
select	下拉选择列表
optgroup	选项组
option	下拉列表中的选项
button	按钮可以触发form表单提交的动作
fieldset	一组相关的表单元素，并使用外框包含起来
legend	fieldset元素的标题

form 标签属性

属性	值	描述
accept	MIME_type	HTML5 不支持。规定服务器接收到的文件的类型。（文件是通过文件上传提交的）
accept-charset	character_set	规定服务器可处理的表单数据字符集。
action	URL	规定当提交表单时向何处发送表单数据。
autocomplete	on off	规定是否启用表单的自动完成功能。
enctype	application/x-www-form-urlencoded , multipart/form-data(文本上传) , text/plain	规定在向服务器发送表单数据之前如何对其进行编码。（适用于 method=“post” 的情况）
method	get post	向服务器提交数据。geturl明文提交，参数4kb大小，只能携带不敏感参数。post 提交敏感信息数据
name	text	规定表单的名称。
novalidate	novalidate	如果使用该属性，则提交表单时不进行验证。
target	_blank , _self , _parent , _top	规定在何处打开 action URL。

注意：form要配合其他表单使用

input 标签属性

属性	值	描述
accept	audio/* video/* image/* MIME_type	规定通过文件上传来提交的文件的类型。 (只针对type=“file”)
align	left , right , top , middle , bottom	HTML5已废弃，不赞成使用。规定图像输入的对齐方式。 (只针对type=“image”)
alt	text	定义图像输入的替代文本。 (只针对type=“image”)
autocomplete	on off	autocomplete 属性规定元素输入字段是否应该启用自动完成功能。
autofocus	autofocus	属性规定当页面加载时元素应该自动获得焦点。
checked	checked	checked 属性规定在页面加载时应该被预先选定的元素。 (只针对 type=“checkbox” 或者 type=“radio”)
disabled	disabled	disabled 属性规定应该禁用的元素。
form	form_id	form 属性规定元素所属的一个或多个表单。
formaction	URL	属性规定当表单提交时处理输入控件的文件的 URL。(只针对 type=“submit” 和 type=“image”)
formenctype	application/x-www-form-urlencoded , multipart/form-data , text/plain	属性规定当表单数据提交到服务器时如何编码(只适合 type=“submit” 和 type=“image”)。
formmethod	get post	定义发送表单数据到 action URL 的 HTTP 方法。 (只适合 type=“submit” 和 type=“image”)
formnovalidate	formnovalidate	formnovalidate 属性覆盖元素的 novalidate 属性。
formtarget	_blank ,_self, _parent, _top ,framename	规定表示提交表单后在哪里显示接收到响应的名称或关键词。(只适合 type=“submit” 和 type=“image”)
height	pixels	规定元素的高度。(只针对type=“image”)
list	datalist_id	属性引用元素，其中包含元素的预定义选项。
max	number date	属性规定元素的最大值。
maxlength	number	属性规定元素中允许的最大字符数。
min	number date	属性规定元素的最小值。
multiple	multiple	属性规定允许用户输入到元素的多个值。
name	text	name 属性规定元素的名称。
pattern	regexp	pattern 属性规定用于验证元素的值的正则表达式。
placeholder	text	placeholder 属性规定可描述输入字段预期值的简短的提示信息。
readonly	readonly	readonly 属性规定输入字段是只读的。
required	required	属性规定必需在提交表单之前填写输入字段。
size	number	size 属性规定以字符数计的元素的可见宽度。
src	URL	src 属性规定显示为提交按钮的图像的 URL。 (只针对 type=“image”)
step	number	step 属性规定元素的合法数字间隔。
type	button , checkbox , color ,date , datetime ,datetime-local , email , file , hidden ,image , month , number , password , radio , range , reset , search , submit(触发form表单提交) , tel , text , time , url ,week	type 属性规定要显示的元素的类型。
value	text	指定元素 value 的值。
width	pixels	width 属性规定元素的宽度。 (只针对type=“image”)

<form action="post" enctype="multipart/form-data">
        <label for="user">
            用户名：<input type="text" id="user" name='username'>
        </label><br><br>
        <label for="pass">
            密码：<input type="password" id="pass" name="password">
        </label><br><br>
        <label for="email">
            邮箱：<input type="email" name="email" id="email">
        </label><br><br>
        <label for="tel">
            电话：<input type="tel" name="tel" id="tel">
        </label><br><br>
        性别：
        <label for="nan">
            男<input type="radio" name="xingbie" id="nan" value="" checked="checked">
        </label>
        <label for="nv">
            女<input type="radio" name="xingbie" id="nv" value="">
        </label>
        <label for="other">
            Gay<input type="radio" name="other" id="other" disabled>
        </label><br><br>
        爱好：
        <label for="eat">
            吃<input type="checkbox" name="hubby" id="eat">
        </label>
        <label for="play">
            玩<input type="checkbox" name="hubby" id="play">
        </label>
        <label for="drink">
            喝<input type="checkbox" name="hubby" id="drink">
        </label><br><br>
        日期：
        <label for="date">
            <input type="date" name="date" id="date">
        </label><br><br>
        日期时间：
        <label for="local_time">
            <input type="datetime-local" name="" id="local_time">
        </label><br><br>
        <select name="" id="">
            <optgroup label="北京">
                <option value="1">朝阳区</option>
                <option value="2">xxoo区</option>
                <option value="3">ooxx区</option>
            </optgroup>
            <optgroup label="上海">
                <option value="4">黄浦区</option>
                <option value="5">青浦区</option>
                <option value="6">徐汇区</option>
            </optgroup>
        </select><br><br>
        <label for="file">
            文件：<input type="file" name="file" id="file">
        </label><br><br>
        <textarea name="desc" id="" cols="30" rows="10"></textarea><br><br>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </form>

html总结之表单

select 标签

<form action="" method="post">
  <select name="city" id="city">
    <option value="1">北京</option>
    <option selected="selected" value="2">上海</option>
    <option value="3">广州</option>
    <option value="4">深圳</option>
  </select>
</form>

html总结之表单

<!DOCTYPE html>
<html>
<head> 
	<meta charset="utf-8"> 
	<title>Bran.im</title> 
</head>
<body>
    <form action="">
        <select name="" id="">
            <optgroup label="北京">
                <option value="1">朝阳区</option>
                <option value="2">xxoo区</option>
                <option value="3">ooxx区</option>
            </optgroup>
            <optgroup label="上海">
                <option value="4">黄浦区</option>
                <option value="5">青浦区</option>
                <option value="6">徐汇区</option>
            </optgroup>
        </select>
    </form>
</body>
</html>

html总结之表单

表单

select 标签

相关推荐