B21-陈新运-网页前端2-CFANZ编程社区

1.表单

1.1form

form标签用于为用户输入创建HTML表单

表单能够包含input元素，比如文本字段、复选框、单选框、提交按钮等

表单用于像服务器传输数据。form元素的块级元素，其前后会产生拆行

常用属性

属性	值	描述
action	URL	规定当提交表单时向何处发送表单数据
method	get、post	规定用于发送form-data的http方法
name	Form_name	规定表单的名称
target	_blank_self_parent_top framename	规定在何处打开action URL

method：表单提交方式：get、post

get：默认，主动的获取方式，数据放在url上，数据的容量有限，安全性差，有缓存

post：数据放在请求实体中，数据量理论上是没有限制，相对安全，没有缓存

###1.2input

input标签用于收集用户信息

根据不同type属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、单选按钮、按钮

表单元素都需要设置name属性值，否者值无法传递

常用属性

属性	值	描述
alt	text	定义图像输入的替代文本。
checked	checked	规定此 input 元素首次加载时应当被选中。
disabled	disabled	当 input 元素加载时禁用此元素。
form	formname	规定输入字段所属的一个或多个表单。
formaction	URL	覆盖表单的 action 属性。（适用于 type=“submit” 和 type=“image”）
formmethod	get post	覆盖表单的 method 属性。（适用于 type=“submit” 和 type=“image”）
formtarget	_blank _self _parent _top framename	覆盖表单的 target 属性。（适用于 type=“submit” 和 type=“image”）
height	pixels %	定义 input 字段的高度。（适用于 type=“image”）
list	datalist-id	引用包含输入字段的预定义选项的 datalist 。
name	field_name	定义 input 元素的名称。
pattern	regexp_pattern	规定输入字段的值的模式或格式。例如 pattern="[0-9]" 表示输入值必须是 0 与 9 之间的数字。
readonly	readonly	规定输入字段为只读。
required	required	指示输入字段的值是必需的。
size	number_of_char	定义输入字段的宽度。
src	URL	定义以提交按钮形式显示的图像的 URL。
type	button checkbox file hidden image password radio reset submit text	规定 input 元素的类型。
value	value	规定 input 元素的值。
width	pixels %	定义 input 字段的宽度。（适用于 type=“image”）

		<form action="#" method="post" id="myform" name="myform">
			
			编号：<input type="hidden" value="1" name="id"/><br>
			姓名：<input type="text" name="name" value="张三" /><br>
			密码：<input type="password" name="pwd"   /><br>
			性别：男<input type="radio" name="sex" value="man"  />
				女<input type="radio" name="sex" value="woman"  /><br>
			爱好：唱歌<input type="checkbox" name="hobby" value="sing"   />
			跳舞<input type="checkbox" name="hobby"  value="dance" />
			生日：<input type="date" name="data"   /><br>
			头像：<input type="file" name="head"   /><br>
			<input type="submit" name="" id="" value="提交按钮" />
			<input type="button" name="" id="" value="普通按钮" />
			<input type="reset" name="" id="" value="重置按钮" />
			
		</form>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-glFu3vd7-1644072128605)(C:\Users\cxy\AppData\Roaming\Typora\typora-user-images\image-20220205204831544.png)]

1.3textarea

该标签多行的文本输入控件。文本区内可以无限数量的文本，可以通过cols和rows属性来规定textare的尺寸。cols规定文本区内的可见宽度。rows规定文本区内可见数

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LcRKmRh9-1644072128606)(C:\Users\cxy\AppData\Roaming\Typora\typora-user-images\image-20220205221051623.png)]

<textarea rows="10" cols="10">hello world</textarea>

1.4label

label标签为input元素定义标注

label元素不会呈现任何特殊效果

label标签的for属性应当与相关元素的if属性相同，此时点击label标签会自动为元素聚焦

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1Cjw9YQ2-1644072128606)(C:\Users\cxy\AppData\Roaming\Typora\typora-user-images\image-20220205221621729.png)]

<label for="name">姓名：</label><input type="text" name="name" value="张三" id="name"/><br>

1.5button

按钮，不过我们可以设计这个按钮是样子了

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l0sQQ9l4-1644072128607)(C:\Users\cxy\AppData\Roaming\Typora\typora-user-images\image-20220205221900719.png)]

			<button type="button">普通按钮</button>
			<button type="submit">提交按钮</button>
			<button type="reset">重置按钮</button>

1.6select

定义下拉框

属性	值	描述
autofocus	autofocus	规定在页面加载后文本区域自动获得焦点。
disabled	disabled	规定禁用该下拉列表。
form	form_id	规定文本区域所属的一个或多个表单。
multiple	multiple	规定可选择多个选项。
name	name	规定下拉列表的名称。
required	required	规定文本区域是必填的。
size	number	规定下拉列表中可见选项的数目。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LZ8FqJcD-1644072128607)(C:\Users\cxy\AppData\Roaming\Typora\typora-user-images\image-20220205222338713.png)]

			城市：<select name="city">
				<option value="">请选择城市</option>
				<option value ="beijing">北京</option>没有设置value时传递的是北京
				<option value ="shanghai">上海</option>
			</select>