Understanding HTML Form Elements and Simulating a Baidu Search Interface
Tech
1
Form elements are the tags that can be placed within a <form> element to create interactive web forms. Below is an example demonstrating various form elements with explanations and a simulation of the Baidu search interface.
Example of Form Elements
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form Elements Example</title>
</head>
<body>
<form action="" method="get">
<!-- Text Input -->
<input type="text" name="username" placeholder="Enter ID information">
<input type="text" name="username2" value="123123" readonly>
<input type="text" name="username3" value="456456" disabled>
<!-- Password Input -->
<input type="password" name="password">
<!-- Radio Buttons -->
Gender:
<input type="radio" name="gender" value="male" checked> Male
<input type="radio" name="gender" value="female"> Female
<!-- Checkboxes -->
Favorite Languages:
<input type="checkbox" name="language" value="java" checked> Java
<input type="checkbox" name="language" value="python" checked> Python
<input type="checkbox" name="language" value="php"> PHP
<input type="checkbox" name="language" value="csharp"> C#
<!-- File Upload -->
<input type="file">
<!-- Hidden Input -->
<input type="hidden" name="hiddenData" value="123123">
<!-- Buttons -->
<input type="button" value="Regular Button">
<input type="reset" value="Reset">
<input type="image" src="img/java_core.jpg" alt="Java Core">
<!-- Dropdown List -->
Favorite City:
<select name="city" multiple>
<option value="0">--- Select ---</option>
<option value="1">Harbin</option>
<option value="2" selected>Qingdao</option>
<option value="3">Zhengzhou</option>
<option value="4">Xi'an</option>
<option value="5">Tianjin</option>
</select>
<!-- Textarea -->
Self Introduction:
<textarea style="resize: none;" rows="10" cols="30">Enter information here...</textarea>
<br>
<!-- Label -->
<label for="userInput">Username:</label>
<input type="text" name="userInput" id="userInput">
<!-- Submit Button -->
<input type="submit" value="Submit">
</form>
</body>
</html>
Key Points:
- Text Input: Uses
type="text"withnamefor data submission.placeholderprovides hints,readonlyprevents editing but allows submission, anddisableddisables the field entire. - Password Input:
type="password"hides entered text. - Radio Buttons: Grouped by
name; only one can be selected per group. Usevalueto differentiate options andcheckedfor default selection. - Checkboxes: Also grouped by
name; multiple can be selected. Submitted data concatenates with&. - File Upload:
type="file"allows file selection. - Hidden Input:
type="hidden"stores data not visible to users. - Buttons:
type="button"for generic actions,type="reset"to clear form,type="image"for image-based submission. - Dropdown List:
<select>with<option>elements;multipleallows multi-selection,selectedsets default. - Textarea: Multi-line text input;
style="resize: none;"prevents resizing. - Label: Associates text with an input using
forandidfor accessibility. - Submit Button:
type="submit"sends form data to the server.
Simulating Baidu Search
Here is a simple HTML page that mimics the Baidu search interface:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Baidu Search Simulation</title>
<link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon">
</head>
<body>
<form action="https://www.baidu.com/s" method="get">
<input type="text" name="wd">
<input type="submit" value="Baidu Search">
</form>
</body>
</html>
This form uses action="https://www.baidu.com/s" to submit search queries to Baidu's server, with name="wd" for the query parameter, simulating the core functionality of the Baidu search page.
