Basic knowledge of front-end (c), Forms form

Analog Baidu search box

<form action="search.jsp">
<!-- action：提交表单时向何处发送表单中的数据,一般可用#代替 -->
		<input type="text" name="search">
		<!-- type：数据类型，name;会把提交的数据赋给name里面的值然后提交给后台 -->
		<input type="submit" value="百度一下">
		<!-- 类型是submit就是提交的意思 -->
</form>

Analog login box method (get, post)

<form action="#" method="post">
		<!-- 表单提交方式有两种，当没写这个标签时默认为get
			get:将数据作为URL的一部分送给服务器，URL由地址部分和数据部分构成，以"?"隔开。数据以"名称=值"得方式成对出现数据之间通过"&"隔开
			post:将数据隐藏在HTTP的数据流中进行传输，请求数据不会出现在地址栏中，安全性比get方式高，且对数据长度没有限制。
		 -->
		<table>
			<tr>
				<td><input type="text" name="user"></td>
			</tr>
			<tr>
				<td><input type="password" name="pwd"></td>
			</tr>
			<tr>
				<td><input type="checkbox" name="again" id="">
                下次自动登录
				</td>
			</tr>
			<tr>
				<td><input type="submit" value="登陆"></td>
			</tr>
		</table>
	</form>

When the submission method is get:

When the method presented in a way that is safer for the post :()

enctype attribute

Before submitting the form data, through encoding enctype attribute data in the form described
three encoding mode: application / x-www-form -urlencoded, multipart / form-data, text / plain

application / x-www-form-urlencoded default encoding

Most forms will use this coding method, before the server, all characters will be encoded in Unicode sending data, and special handling of certain characters, spaces, replace the + sign, the other is converted to the corresponding ASCII format (ie, "% XX "format, XX represents the ASCII hexadecimal digits)

multipart/form-data

Often used when the form contains file upload control, which is the wrong way to encode characters

<form action="#" enctype="multipart/form-data">
		<!-- 如果表单中有file类型的数据，则必须加上这个标签 -->
		<table>
			<tr>
				<td><input type="file" name="file" id=""></td>
			</tr>
		</table>
</form>	

text/plain

It will convert the + encounters spaces, no other special characters are encoded

Form fields

Form fields include a text box, password box, hidden fields, multi-line text boxes, radio buttons, check boxes, list boxes, and select the file selection box and other elements. In addition to multi-line text box and list box selection, most of the form fields using labels to create
attributes: id (of the current control unique ID, interface design, CSS, JavaScript can be used)
name (the name of the current control to send data to the server when, name acquired corresponding value)
value (form fields initial value)
type (control type, text, password, radio, checkbox , file, hidden, button, submit, reset, image , etc.)
MAXLENGTH (input text box a maximum number of characters)
size (width of the text input control)

maxlength和size

value

<tr>
	<td><input type="text" name="user" value="请输入用户名"></td>
</tr>

placeholder

h5 in the new placeholder attribute

<tr>
	<td><input type="text" name="user" placeholder="请输入用户名"></td>
</tr>

readonly和diasbled

<td><input type="text" name="user" placeholder="请输入用户名" readonly="readonly" >
<!-- readonly:只可读不可更改，颜色不变，disabled： 颜色变成灰色，也不可更改，光标都不可能在那停留-->
</td>

Radio button radio

性别：<input type="radio" name="sex" value="man" id="" checked="checked"/>男
<input type="radio" name="sex" value="woman" id=""/>女<br>
<!-- 单选按钮根据name属性将其分为几组，每组只有一个选项，name必须相同才是单选
提交的值是value里面的值 ，所以这里value值必须有-->
专业：<input type="radio" name="major" value="computer" id=""/>计算机
<input type="radio" name="major" value="physics" id="" checked="" />物理
<!-- checked两种表达方式都行，代表默认被点中 -->
<input type="radio" name="major" value="chemical" id=""/>化工

Checkbox checkbox

爱好<input type="checkbox" name="hobby" id="" value="music" checked=""/>音乐
<!-- type为checkbox代表复选框 name相同的为一组允许多选-->
<input type="checkbox" name="hobby" id="" value="swimming" checked=""/>游泳
<input type="checkbox" name="hobby" id="" value="football" />足球
<input type="checkbox" name="hobby" id="" value="dance" />跳舞

Hidden Field hidden

Available when a user does not need to see, but need to pass data background

Multi-line text textarea

<tr>
	<td><textarea name="评论" id="" cols="30" rows="10"></textarea></td>
</tr>

List selection box

select

请选择国家：<select name="country" id="">
		<option value="China">中国</option>
		<option value="US">美国</option>
		<option value="English">英国</option>
		<!-- value里面的值才是传给后台的 -->
	    </select>
	    <br>
		<input type="submit" value="提交">

OPTGROUP

请选择日期：<select name="day" id="" >
				<optgroup label="--工作日--">
					<option value="monday">星期一</option>
				    <option value="tuesday">星期二</option>
				    <option value="wednesday">星期三</option>
				</optgroup>
				<optgroup label="--休息日--">
					<option value="saturday">星期六</option>
				    <option value="sunday">星期天</option>
				</optgroup>
			</select>
			<br>
			<input type="submit" value="提交">

Button control sumbit, reset, button, image

<input type="text" name="user" id="">
<input type="submit" value="提交">
<!-- sumbit提交表单 -->
<input type="reset" value="重置">
<!-- reset重置标签 -->
<input type="button" value="按钮">
<!-- 表示一个普通按钮，当用户点击按钮时，可以触发JavaScript脚本的按钮 -->
<input type="image" src="images/huidingbu.png" alt="">
<!-- image表示图片按钮，点击图片可提交表单 -->

Form fieldset grouping

 <fieldset>
    <legend>请选择个人爱好</legend>
	<input type="checkbox" name="hobby" id="" value="music" checked=""/>音乐
    <input type="checkbox" name="hobby" id="" value="swimming" checked=""/>游泳
	<input type="checkbox" name="hobby" id="" value="football" />足球
	<input type="checkbox" name="hobby" id="" value="dance" />跳舞
</fieldset>
<fieldset>
	<legend>请选择个人爱好</legend>
	<input type="checkbox" name="hobby" id="" value="music" checked=""/>音乐
	<input type="checkbox" name="hobby" id="" value="swimming" checked=""/>游泳
	<input type="checkbox" name="hobby" id="" value="football" />足球
	<input type="checkbox" name="hobby" id="" value="dance" />跳舞
</fieldset>

to sum up