form
Form : used to collect different types of user input data and send it to the server to realize data interaction between the user and the server;
The form tag form is used to declare the form and define the scope of data collection
Note :
1. There can be multiple form tags in a page, but the tags are independent of each other and cannot be nested;
2. The user can only submit the data in one form at a time when sending data to the server. If you submit multiple forms, you need to use Asynchronous interaction in JS to implement
syntax:
<form action="提交表单时向何处发送表单数据" method="get | post" name="表单名称">
...表单元素
</from>
method attribute : the http method used when submitting the form; the default get method
get method : send the data to the server as part of the URL address; low security;
there is a data length limit; the requested data can be cached and can be kept in the browser history; it can be collected as a bookmark;
For example:
https://www.baidu.com/?username=123&psd=asd
https://www.baidu.com/?parameter name=parameter value¶meter name=parameter value
post method : hide the data in the http data stream for transmission; the security is higher than get; the
data length is not limited; the request data will not be cached, nor will it be saved in the browser's history, nor will it be used as a bookmark collect;
https://www.baidu.com/
input form field
placeholder prompt information, it will be displayed when your value is empty, but it is not a value itself, and will not be submitted by the form
<input type="类型" name="提交时的名称" value="表单初始值"><br />
<input type="text" name="username" placeholder="请输入账号"><br />
<input type="password" name="password" placeholder="请输入密码"><br />
radio 单选按钮<input type="radio" name="sex" checked>女
<input type="radio" name="sex">男<br />
checkbox 复选框<input type="checkbox" name="hob" checked>吃饭
<input type="checkbox" name="hob">睡觉
<input type="checkbox" name="hob">唱歌
checked is for single selection and multiple selection, it has the effect of default selection, you can write checked or checked=”checked”, they need to have the same name attribute.
submit button
<input type="submit" value="提交"> <br />
<input type="reset" value="重置"> <br />
<input type="button" value="按钮"> <br />
<button>按钮</button> 默认类型为submit<br />
<button type="submit">提交</button><br />
<button type="reset">重置</button><br />
<button type="button">普通按钮</button>
Full code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个页面</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<form action="https://www.baidu.com" method="get" name="表单名称">
<input type="类型" name="提交时的名称" value="表单初始值"><br />
<input type="text" name="username" placeholder="请输入账号"><br />
<input type="password" name="password" placeholder="请输入密码"><br />
radio 单选按钮<input type="radio" name="sex" checked>女
<input type="radio" name="sex">男<br />
checkbox 复选框<input type="checkbox" name="hob" checked>吃饭
<input type="checkbox" name="hob">睡觉
<input type="checkbox" name="hob">唱歌<br />
<input type="submit" value="提交"> <br />
<input type="reset" value="重置"> <br />
<input type="button" value="按钮"> <br />
<button>按钮</button> 默认类型为submit<br />
<button type="submit">提交</button><br />
<button type="reset">重置</button><br />
<button type="button">普通按钮</button>
</from>
</body>
</html>
Page display:
The red arrow above is submission, which will submit all the information bound to the current form to the value of the action, that is, it will generate such a url
point reset: all the information that has been entered or changed will be submitted The value becomes the initial value at the beginning.
document
<input type=”file”> 文件上传
需要在form添加enctype属性
enctype=”multipart/form-data”
<form action=”提交表单时向何处发送表单数据” method=”get | post” name=”表单名称” enctype=”multipart/form-data”>
<input type=”file”> 文件上传
</from>
image button
<input type=”image” src=”images/tables.jpg” alt=”pic”> 文件上传
The picture can set the width and height
<input type=”image” src=”images/tables.jpg” alt=”pic” width=”200px”>
Note: input must be used in conjunction with the src attribute and the alt attribute
Hidden fields. It is invisible to the user, the purpose is to collect or send information to the server, which is beneficial for the program to process the information
<input type=”hidden” value=”值”>
select drop-down list
<select name=””>
<option value=”html” selected>html</option>
<option value=”css”>css</option>
</select>
The Selected attribute is used for the default selection of the drop-down list, which can be directly selected by Ctrip or
Selected="Selected"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个页面</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<form action="https://www.baidu.com" method="get" name="表单名称">
<select name="select">
<option value="html" selected>html</option>
<option value="css">css</option>
</select>
<input type="submit" value="提交">
<input type="reset" value="重置">
</from>
</body>
</html>
The multi-line text field textarea
is generally used where a large amount of text needs to be entered
<textarea cols=”10” rows=”3”><textarea>
cols属性 cols=”10” 表示宽度，一行最多输入一个汉字 即两个字符
rows属性 rows=”3” 表示高度 行数
textarea{ resize:none;} 禁止调整多行文本域的大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个页面</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<form action="https://www.baidu.com" method="get" name="表单名称">
<textarea placeholder="请输入" name="textarea"></textarea>
<select name="select">
<option value="html" selected>html</option>
<option value="css">css</option>
</select>
<input type="submit" value="提交">
<input type="reset" value="重置">
</from>
</body>
</html>
label label
Form label – expand the click range, generally used in combination with radio buttons and check
buttons
<input type=”text” id=”eta”>
<label for=”eta”>吃饭</label>
Implicit way:
<label><input type=”checkbox”>吃饭</label>
The effect achieved now is that the input box can be selected even when you click to eat.
Form related properties
readonly attribute : read-only attribute, cannot be modified, can be submitted
disabled attribute : form elements are prohibited, disabled elements are unavailable, not clickable, and will not be submitted
maxlength attribute : the maximum number of characters allowed to be entered
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个页面</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<form action="https://www.baidu.com" method="get" name="表单名称">
<textarea placeholder="请输入" name="textarea"></textarea>
<select name="select">
<option value="html" selected>html</option>
<option value="css">css</option>
</select>
<input type="submit" value="提交">
<input type="reset" value="重置">
</from>
<p>Name: <input type="text" name="fullname" maxlength="5" /></p>
<p>Name2: <input type="text" name="fullname" size="5"></p>
maxlength="5"则input输入框中只能够输入5个字符<br />
size="5"，表示input输入框只显示5个可见的字符，但你可以输入'无数多字符内容'<br />
即: size居性规定输入字段的宽度(此处即是Name2文本框只显示5个字符大小的宽度)<br />
由于 size属性是一个可视化的设计属性，我们应使用 CSS 中的width来代替它css 语法: <input style="width:100px" />
</body>
</html>
maxlength = "5", then only 5 characters can be entered in the input input box
size = "5", which means that the input input box only displays 5 visible characters, but you can enter 'unlimited multi-character content'
that is: size Residential regulations The width of the input field (here, the Name2 text box only displays the width of 5 characters).
Since the size attribute is a visual design attribute, we should use the width in CSS to replace it css syntax:
<input style="width:100px" />
size attribute: the visible length of the form input content, does not affect the input, the length of the input box
value attribute: the initial value
placeholder attribute: the prompt information of the text field
checked attribute: the default selection is used for the default selection of radio buttons and check boxes
selected attribute Default selected for dropdown list